Style Guide Unibo Navigation

Componenti custom Unibo per la navigazione.

Unibo Menu

Menù Unibo con icone utilizzabile fino a 6 voci, per essere visualizzato correttamente nella versione in responsive.
Se il menù è su più livelli, nella versione responsive non vengono visualizzati.

Si può utilizzare la classe hide-for-sr-small-only nel caso in cui si voglia nascondere l'etichetta per i dispositivi più piccoli mantenendo la leggibilità per Screen Reader

Ci sono due versioni di questo elemento:

SCSS da includere: u_menu.scss
Classe da utilizzare: u-menu-main

Menu Basic

Unibo Menu Gerarchico su due livelli

Unibo Breadcrumbs/path di navigazione

Percorso di navigazione con spaziature e enfasi su homepage

Utilizza di base le Breadcrumbs di Foundation.

Possibilità di inserire un percorso di navigazione personalizzato con spaziature differenti e con enfasi sul link alla homepage.

E' possibile inserire le breadcrumbs immediatamente dopo la testata header e all'interno della colonna principale.

SCSS da includere: u_breadcrumbs.scss
Classe da utilizzare: u-breadcrumbs

Unibo Top Bar

Per utilizzare la top bar custom Unibo inserire la classe u-top-bar.
Questo componente sfrutta la proprietà css display: flex e agisce come fosse una griglia fluida in base agli elementi contenuti in esso. Per poter sfruttare la fluidità del componente, i box al suo interno devono avere la classe .top-bar-box. All'interno di .top-bar-box possono essere inseriti input, select e pulsanti.
Di default un elemento .top-bar-box si allarga a seconda dello spazio disponibile e se non c'è più spazio va a capo.
Un elemento .top-bar-box può avere anche classe .u-button-group, pensato appositamente per pulsanti che si allineano a destra della pagina.

SCSS da includere: u_top_bar.scss
Classe da utilizzare: u-top-bar

L'elemento .top-bar-box può avere anche classe .u-search-group, ovvero una ricerca contestuale a seconda dell'elemento selezionato dalla tendina. 

                
                  

                      

                          
                      

                  
                      
       
                          
                             
                      

                      

                          
                          
                          
                          

                              
                                  Vai
Vai