Documentazione ed esempi per la creazione di una testata di navigazione.
L’header di un sito della Pubblica Amministrazione è solitamente composto di 3 elementi principali:
Un cosiddetto Slim Header, una sottile fascia dello stesso colore o, preferibilmente, di colore lievemente diverso rispetto al tema principale del sito, che mostra appartenenza e alcuni link funzionali con impatto globale o esterno al sito stesso.
Un Header Centrale che identifica in modo chiaro il sito attraverso logo, testo e social, e può contenere un link per effettuare ricerche sul sito.
Un Header Nav dedicato alla navigazione, visibile su schermi di grandi dimensioni e attraverso il classico pulsante di tipo “burger menu”
() su dispositivi mobili.
Accessibilità
Considerando l’importanza dell’Header per la navigazione, si ricorda porre particolare attenzione all’utilizzo della corretta semantica HTML, alle etichette e agli attributi ARIA, oltre a validare e testare sempre con utenti il risultato.
Il titolo del sito, “Nome dell’Istituzione” negli esempi, è contenuto in un <div> generico e non un tag <h1> per evitare conflitti con gli <h1> presenti nelle singole pagine. Nel caso in cui la home page fosse priva di un titolo (es: primo contenuto è una ultima notizia in evidenza) si può applicare il tag <h1> al titolo dell’header unicamente in quella pagina oppure creare un h1 nei contenuti principali di pagina con classe .visually-hidden. Questa ultima soluzione sarà anche utile a dare focus direttamente al tag <h1> laddove siano presenti skiplinks che permettano agli utenti che navigano da tastiera o con tecnologie assistive di saltare i contenuti dell’Header.
Maggiori dettagli sull’accessibilità del componente megamenu nella relativa pagina.
Slim Header
Lo Slim Header mostra un’intestazione, solitamente con riferimento all’ente di appartenenza del progetto o riferimenti utili, oltre ad un eventuale menu per il cambio lingua e l’accesso ad area riservata.
Il cambio lingua è gestito con il componente dropdown.
Per trasformare il pulsante di action situato nell’elemento identificato con .it-header-slim-right-zone e renderlo full-responsive è sufficiente applicare la classe .btn-full alla classe .btn del link/pulsante.
Il modificatore .btn-full è disponibile anche con il tema chiaro attivato da .theme-light.
<divclass="it-header-center-wrapper"><divclass="container-xxl"><divclass="row"><divclass="col-12"><divclass="it-header-center-content-wrapper"><divclass="it-brand-wrapper"><ahref="#"><svgclass="icon"aria-hidden="true"><usehref="/dist/svg/sprites.svg#it-pa"></use></svg><divclass="it-brand-text"><divclass="it-brand-title">Nome dell'Istituzione</div><divclass="it-brand-tagline d-none d-md-block">Tag line dell'Istituzione</div></div></a></div><divclass="it-right-zone"><divclass="it-socials d-none d-md-flex"><span>Seguici su</span><ul><li><ahref="#"aria-label="Facebook"target="_blank"><svgclass="icon"><usehref="/dist/svg/sprites.svg#it-facebook"></use></svg></a></li><li><ahref="#"aria-label="Github"target="_blank"><svgclass="icon"><usehref="/dist/svg/sprites.svg#it-github"></use></svg></a></li><li><ahref="#"aria-label="Twitter"target="_blank"><svgclass="icon"><usehref="/dist/svg/sprites.svg#it-twitter"></use></svg></a></li></ul></div><divclass="it-search-wrapper"><spanclass="d-none d-md-block">Cerca</span><aclass="search-link rounded-icon"aria-label="Cerca nel sito"href="#"><svgclass="icon"><usehref="/dist/svg/sprites.svg#it-search"></use></svg></a></div></div></div></div></div></div></div>
Versione compatta
Per utilizzare la versione più compatta in verticale dell’header centrale è sufficiente aggiungere la classe it-small-header al tag <div class="it-header-center-wrapper">
<divclass="it-header-center-wrapper theme-light"><divclass="container-xxl"><divclass="row"><divclass="col-12"><divclass="it-header-center-content-wrapper"><divclass="it-brand-wrapper"><ahref="#"><svgclass="icon"aria-hidden="true"><usehref="/dist/svg/sprites.svg#it-pa"></use></svg><divclass="it-brand-text"><divclass="it-brand-title">Nome dell'Istituzione</div><divclass="it-brand-tagline d-none d-md-block">Tag line dell'Istituzione</div></div></a></div><divclass="it-right-zone"><divclass="it-socials d-none d-md-flex"><span>Seguici su</span><ul><li><ahref="#"aria-label="Facebook"target="_blank"><svgclass="icon"><usehref="/dist/svg/sprites.svg#it-facebook"></use></svg></a></li><li><ahref="#"aria-label="Github"target="_blank"><svgclass="icon"><usehref="/dist/svg/sprites.svg#it-github"></use></svg></a></li><li><ahref="#"aria-label="Twitter"target="_blank"><svgclass="icon"><usehref="/dist/svg/sprites.svg#it-twitter"></use></svg></a></li></ul></div><divclass="it-search-wrapper"><spanclass="d-none d-md-block">Cerca</span><aclass="search-link rounded-icon"aria-label="Cerca nel sito"href="#"><svgclass="icon"><usehref="/dist/svg/sprites.svg#it-search"></use></svg></a></div></div></div></div></div></div></div>
Header Nav
Header Nav, per elencare le voci di navigazione, siano esse semplici link, o pulsanti per Dropdown e Megamenu.
Menu su mobile
Quando header nav fa parte di un header completo (cioè è contenuto in un elemento .it-header-wrapper), il pannello laterale mobile mostra gli stessi elementi di navigazione presenti su desktop, nell’ordine:
logo, titolo e tagline dell’ente (.it-brand-wrapper dell’Header Centrale)
menu di navigazione principale (.navbar-nav)
menu di navigazione secondario (.navbar-nav.navbar-secondary)
link accessori dello Slim Header (.nav-mobile .link-list)
social (.it-socials dell’Header Centrale)
Non è necessario duplicare il markup: gli elementi vengono clonati dal componente JavaScript navbarcollapsible all’interno di .menu-wrapper e nascosti da CSS a partire dal breakpoint lg, dove ogni elemento torna nella propria fascia.
La fascia con il logo usa di default il colore primario del sito come sfondo. Per renderla bianca, con testo e logo inveriti nel colore primario, aggiungi la classe .menu-brand-light all’elemento .navbar-collapsable.
Le voci del menu su mobile hanno sempre sfondo bianco e link nel colore primario: per questo motivo la classe .theme-dark-mobile non è più disponibile.
<divclass="it-header-navbar-wrapper"><divclass="container-xxl"><divclass="row"><divclass="col-12"><!--start nav--><navclass="navbar navbar-expand-lg"aria-label="Navigazione principale"><buttonclass="custom-navbar-toggler"type="button"aria-controls="nav1"aria-label="Mostra/Nascondi la navigazione"data-bs-toggle="navbarcollapsible"data-bs-target="#nav1"><svgclass="icon"><usehref="/dist/svg/sprites.svg#it-burger"></use></svg></button><divclass="navbar-collapsable"id="nav1"tabindex="-1"><divclass="close-div"><buttonclass="btn close-menu"type="button"><spanclass="visually-hidden">Nascondi la navigazione</span><svgclass="icon"><usehref="/dist/svg/sprites.svg#it-close-big"></use></svg></button></div><divclass="menu-wrapper"><ulclass="navbar-nav"><liclass="nav-item active"><aclass="nav-link active"href="#"aria-current="page"><span>Link attivo</span></a></li><liclass="nav-item"><aclass="nav-link disabled"href="#"aria-disabled="true"><span>Link disabilitato</span></a></li><liclass="nav-item dropdown"><aclass="nav-link dropdown-toggle"href="#"role="button"data-bs-toggle="dropdown"aria-expanded="false"id="mainNavDropdown1"><span>Dropdown</span><svgclass="icon icon-xs"><usehref="/dist/svg/sprites.svg#it-expand"></use></svg></a><divclass="dropdown-menu"role="region"aria-labelledby="mainNavDropdown1"><divclass="link-list-wrapper"><ulclass="link-list"><li><aclass="dropdown-item list-item"href="#"><span>Link lista 1</span></a></li><li><aclass="dropdown-item list-item"href="#"><span>Link lista 2</span></a></li><li><aclass="dropdown-item list-item"href="#"><span>Link lista 3</span></a></li><li><spanclass="divider"></span></li><li><aclass="dropdown-item list-item"href="#"><span>Link lista 4</span></a></li></ul></div></div></li><!-- megamenu --><liclass="nav-item dropdown megamenu"><buttontype="button"class="nav-link dropdown-toggle px-lg-2 px-xl-3"data-bs-toggle="dropdown"aria-expanded="false"id="megamenu-1"data-focus-mouse="false"><span>Megamenu</span><svgrole="img"class="icon icon-xs"><usehref="/dist/svg/sprites.svg#it-expand"></use></svg></button><divclass="dropdown-menu shadow-lg"role="region"aria-labelledby="megamenu-1"><divclass="megamenu-content"><divclass="row"><divclass="col-xs-12 col-lg-4 px-0"><divclass="row"><divclass="col-12 it-vertical it-description pb-lg-3"><divclass="description-content px-4 ps-sm-5 ms-3"><divclass="ratio ratio-21x9 lightgrey-bg-a1 mb-4 rounded"><figureclass="figure"><imgsrc="https://placehold.co/560x240/ebebeb/808080/?text=Immagine"class="figure-img img-fluid rounded"alt="Segnaposto"></figure></div><p>
Testo utile a fornire una descrizione dei contenuti della sezione <strong>megamenu</strong>.
</p></div></div></div></div><divclass="col-12 col-lg-8"><divclass="it-heading-link-wrapper"><aclass="it-heading-link"href="#"><svgrole="img"class="icon icon-sm me-2 mb-1"><usehref="/dist/svg/sprites.svg#it-arrow-right-triangle"></use></svg><span>Esplora la sezione megamenu</span></a></div><divclass="row"><divclass="col-12 col-lg-6"><divclass="link-list-wrapper"><ulclass="link-list"><li><aclass="list-item dropdown-item"href="#"><svgrole="img"class="icon icon-sm me-2"><usehref="/dist/svg/sprites.svg#it-arrow-right-triangle"></use></svg><span>Link lista 1</span></a></li><li><aclass="list-item dropdown-item"href="#"><svgrole="img"class="icon icon-sm me-2"><usehref="/dist/svg/sprites.svg#it-arrow-right-triangle"></use></svg><span>Link lista 2</span></a></li><li><aclass="list-item dropdown-item "href="#"><svgrole="img"class="icon icon-sm me-2"><usehref="/dist/svg/sprites.svg#it-arrow-right-triangle"></use></svg><span>Link lista 3</span></a></li></ul></div></div><divclass="col-12 col-lg-6"><divclass="link-list-wrapper"><ulclass="link-list"><li><aclass="list-item dropdown-item"href="#"><svgrole="img"class="icon icon-sm me-2"><usehref="/dist/svg/sprites.svg#it-arrow-right-triangle"></use></svg><span>Link lista 4</span></a></li><li><aclass="list-item dropdown-item"href="#"><svgrole="img"class="icon icon-sm me-2"><usehref="/dist/svg/sprites.svg#it-arrow-right-triangle"></use></svg><span>Link lista 5</span></a></li><li><aclass="list-item dropdown-item "href="#"><svgrole="img"class="icon icon-sm me-2"><usehref="/dist/svg/sprites.svg#it-arrow-right-triangle"></use></svg><span>Link lista 6</span></a></li></ul></div></div></div></div></div></div></div></li></ul></div></div></nav></div></div></div></div>
Temi colore disponibili
I’Header Nav ha due temi colore, uno chiaro (“light”) e uno scuro (“dark”). Lo stile di default ha differenti caratteristiche colore a seconda della versione desktop e mobile:
Su desktop lo stile di default ha un background di colore primario e link bianchi. Gli elementi Dropdown e Megamenu hanno background bianco, testi neri e link di colore primario.
Su mobile lo stile di default ha un background bianco e testi e link di colore primario.
Per modificare il colore di sfondo e testi di Header Nav bisogna aggiungere la class .theme-light al tag <nav class="it-header-navbar-wrapper">:
<divclass="it-header-navbar-wrapper theme-light"><divclass="container-xxl"><divclass="row"><divclass="col-12"><!--start nav--><navclass="navbar navbar-expand-lg"aria-label="Navigazione principale"><buttonclass="custom-navbar-toggler"type="button"aria-controls="nav3"aria-label="Mostra/Nascondi la navigazione"data-bs-toggle="navbarcollapsible"data-bs-target="#nav3"><svgclass="icon"><usehref="/dist/svg/sprites.svg#it-burger"></use></svg></button><divclass="navbar-collapsable"id="nav3"tabindex="-1"><divclass="close-div"><buttonclass="btn close-menu"type="button"><spanclass="visually-hidden">Nascondi la navigazione</span><svgclass="icon"><usehref="/dist/svg/sprites.svg#it-close-big"></use></svg></button></div><divclass="menu-wrapper"><ulclass="navbar-nav"><liclass="nav-item active"><aclass="nav-link active"href="#"aria-current="page"><span>Link attivo</span></a></li><liclass="nav-item"><aclass="nav-link disabled"href="#"aria-disabled="true"><span>Link disabilitato</span></a></li><liclass="nav-item dropdown"><aclass="nav-link dropdown-toggle"href="#"role="button"data-bs-toggle="dropdown"aria-expanded="false"id="mainNavDropdown3"><span>Dropdown</span><svgclass="icon icon-xs"><usehref="/dist/svg/sprites.svg#it-expand"></use></svg></a><divclass="dropdown-menu"role="region"aria-labelledby="mainNavDropdown3"><divclass="link-list-wrapper"><ulclass="link-list"><li><aclass="dropdown-item list-item"href="#"><span>Link lista 1</span></a></li><li><aclass="dropdown-item list-item"href="#"><span>Link lista 2</span></a></li><li><aclass="dropdown-item list-item"href="#"><span>Link lista 3</span></a></li><li><spanclass="divider"></span></li><li><aclass="dropdown-item list-item"href="#"><span>Link lista 4</span></a></li></ul></div></div></li><!-- megamenu --><liclass="nav-item dropdown megamenu"><buttontype="button"class="nav-link dropdown-toggle px-lg-2 px-xl-3"data-bs-toggle="dropdown"aria-expanded="false"id="megamenu-4"data-focus-mouse="false"><span>Megamenu</span><svgrole="img"class="icon icon-xs"><usehref="/dist/svg/sprites.svg#it-expand"></use></svg></button><divclass="dropdown-menu shadow-lg"role="region"aria-labelledby="megamenu-4"><divclass="megamenu-content"><divclass="row"><divclass="col-xs-12 col-lg-4 px-0"><divclass="row"><divclass="col-12 it-vertical it-description pb-lg-3"><divclass="description-content px-4 ps-sm-5 ms-3"><divclass="ratio ratio-21x9 lightgrey-bg-a1 mb-4 rounded"><figureclass="figure"><imgsrc="https://placehold.co/560x240/ebebeb/808080/?text=Immagine"class="figure-img img-fluid rounded"alt="Segnaposto"></figure></div><p>
Testo utile a fornire una descrizione dei contenuti della sezione <strong>megamenu</strong>.
</p></div></div></div></div><divclass="col-12 col-lg-8"><divclass="it-heading-link-wrapper"><aclass="it-heading-link"href="#"><svgrole="img"class="icon icon-sm me-2 mb-1"><usehref="/dist/svg/sprites.svg#it-arrow-right-triangle"></use></svg><span>Esplora la sezione megamenu</span></a></div><divclass="row"><divclass="col-12 col-lg-6"><divclass="link-list-wrapper"><ulclass="link-list"><li><aclass="list-item dropdown-item"href="#"><svgrole="img"class="icon icon-sm me-2"><usehref="/dist/svg/sprites.svg#it-arrow-right-triangle"></use></svg><span>Link lista 1</span></a></li><li><aclass="list-item dropdown-item"href="#"><svgrole="img"class="icon icon-sm me-2"><usehref="/dist/svg/sprites.svg#it-arrow-right-triangle"></use></svg><span>Link lista 2</span></a></li><li><aclass="list-item dropdown-item "href="#"><svgrole="img"class="icon icon-sm me-2"><usehref="/dist/svg/sprites.svg#it-arrow-right-triangle"></use></svg><span>Link lista 3</span></a></li></ul></div></div><divclass="col-12 col-lg-6"><divclass="link-list-wrapper"><ulclass="link-list"><li><aclass="list-item dropdown-item"href="#"><svgrole="img"class="icon icon-sm me-2"><usehref="/dist/svg/sprites.svg#it-arrow-right-triangle"></use></svg><span>Link lista 4</span></a></li><li><aclass="list-item dropdown-item"href="#"><svgrole="img"class="icon icon-sm me-2"><usehref="/dist/svg/sprites.svg#it-arrow-right-triangle"></use></svg><span>Link lista 5</span></a></li><li><aclass="list-item dropdown-item "href="#"><svgrole="img"class="icon icon-sm me-2"><usehref="/dist/svg/sprites.svg#it-arrow-right-triangle"></use></svg><span>Link lista 6</span></a></li></ul></div></div></div></div></div></div></div></li></ul></div></div></nav></div></div></div></div>
Navigazione secondaria
Al menu di navigazione principale può essere aggiunto anche un menu di navigazione secondario includendo a .menu-wrapper una seconda lista <ul> con classe .navbar-nav.navbar-secondary e la stessa struttura dati della lista .navbar-nav principale.
<headerclass="it-header-wrapper"><divclass="it-header-slim-wrapper"><divclass="container-xxl"><divclass="row"><divclass="col-12"><divclass="it-header-slim-wrapper-content"><aclass="d-block navbar-brand"href="#">Ente appartenenza</a><divclass="nav-mobile"><navaria-label="Navigazione secondaria"><divclass="link-list-wrapper d-none d-lg-flex"><ulclass="link-list"aria-label="Link utili"><li><aclass="list-item"href="#">Link 1</a></li><li><aclass="list-item active"href="#"aria-current="page">Link 2 (Attivo)</a></li></ul></div></nav></div><divclass="it-header-slim-right-zone"><divclass="nav-item dropdown"><aclass="nav-link dropdown-toggle"href="#"role="button"data-bs-toggle="dropdown"aria-expanded="false"><spanclass="visually-hidden">Selezione lingua: lingua selezionata</span><span>ITA</span><svgclass="icon d-none d-lg-block"><usehref="/dist/svg/sprites.svg#it-expand"></use></svg></a><divclass="dropdown-menu"><divclass="row"><divclass="col-12"><divclass="link-list-wrapper"><ulclass="link-list"><li><aclass="dropdown-item list-item"href="#"><span>ITA <spanclass="visually-hidden">selezionata</span></span></a></li><li><aclass="dropdown-item list-item"href="#"><span>ENG</span></a></li></ul></div></div></div></div></div><divclass="it-access-top-wrapper"><aclass="btn btn-primary btn-xs"href="#">Accedi</a></div></div></div></div></div></div></div><divclass="it-nav-wrapper"><divclass="it-header-center-wrapper"><divclass="container-xxl"><divclass="row"><divclass="col-12"><divclass="it-header-center-content-wrapper"><divclass="it-brand-wrapper"><ahref="#"><svgclass="icon"aria-hidden="true"><usehref="/dist/svg/sprites.svg#it-pa"></use></svg><divclass="it-brand-text"><divclass="it-brand-title">Nome dell'Istituzione</div><divclass="it-brand-tagline d-none d-md-block">Tag line dell'Istituzione</div></div></a></div><divclass="it-right-zone"><divclass="it-socials d-none d-md-flex"><span>Seguici su</span><ul><li><ahref="#"aria-label="Facebook"target="_blank"><svgclass="icon"><usehref="/dist/svg/sprites.svg#it-facebook"></use></svg></a></li><li><ahref="#"aria-label="Github"target="_blank"><svgclass="icon"><usehref="/dist/svg/sprites.svg#it-github"></use></svg></a></li><li><ahref="#"aria-label="Twitter"target="_blank"><svgclass="icon"><usehref="/dist/svg/sprites.svg#it-twitter"></use></svg></a></li></ul></div><divclass="it-search-wrapper"><spanclass="d-none d-md-block">Cerca</span><aclass="search-link rounded-icon"aria-label="Cerca nel sito"href="#"><svgclass="icon"><usehref="/dist/svg/sprites.svg#it-search"></use></svg></a></div></div></div></div></div></div></div><divclass="it-header-navbar-wrapper"><divclass="container-xxl"><divclass="row"><divclass="col-12"><!--start nav--><navclass="navbar navbar-expand-lg"aria-label="Navigazione principale"><buttonclass="custom-navbar-toggler"type="button"aria-controls="navC1"aria-label="Mostra/Nascondi la navigazione"data-bs-toggle="navbarcollapsible"data-bs-target="#navC1"><svgclass="icon"><usehref="/dist/svg/sprites.svg#it-burger"></use></svg></button><divclass="navbar-collapsable"id="navC1"tabindex="-1"><divclass="close-div"><buttonclass="btn close-menu"type="button"><spanclass="visually-hidden">Nascondi la navigazione</span><svgclass="icon"><usehref="/dist/svg/sprites.svg#it-close-big"></use></svg></button></div><divclass="menu-wrapper"><ulclass="navbar-nav"><liclass="nav-item active"><aclass="nav-link active"href="#"aria-current="page"><span>Link attivo</span></a></li><liclass="nav-item"><aclass="nav-link disabled"href="#"aria-disabled="true"><span>Link disabilitato</span></a></li><liclass="nav-item dropdown"><aclass="nav-link dropdown-toggle"href="#"role="button"data-bs-toggle="dropdown"aria-expanded="false"id="mainNavDropdownC1"><span>Dropdown</span><svgclass="icon icon-xs"><usehref="/dist/svg/sprites.svg#it-expand"></use></svg></a><divclass="dropdown-menu"role="region"aria-labelledby="mainNavDropdownC1"><divclass="link-list-wrapper"><ulclass="link-list"><li><aclass="dropdown-item list-item"href="#"><span>Link lista 1</span></a></li><li><aclass="dropdown-item list-item"href="#"><span>Link lista 2</span></a></li><li><aclass="dropdown-item list-item"href="#"><span>Link lista 3</span></a></li><li><spanclass="divider"></span></li><li><aclass="dropdown-item list-item"href="#"><span>Link lista 4</span></a></li></ul></div></div></li><!-- megamenu --><liclass="nav-item dropdown megamenu"><buttontype="button"class="nav-link dropdown-toggle px-lg-2 px-xl-3"data-bs-toggle="dropdown"aria-expanded="false"id="megamenu-5"data-focus-mouse="false"><span>Megamenu</span><svgrole="img"class="icon icon-xs"><usehref="/dist/svg/sprites.svg#it-expand"></use></svg></button><divclass="dropdown-menu shadow-lg"role="region"aria-labelledby="megamenu-5"><divclass="megamenu-content"><divclass="row"><divclass="col-xs-12 col-lg-4 px-0"><divclass="row"><divclass="col-12 it-vertical it-description pb-lg-3"><divclass="description-content px-4 ps-sm-5 ms-3"><divclass="ratio ratio-21x9 lightgrey-bg-a1 mb-4 rounded"><figureclass="figure"><imgsrc="https://placehold.co/560x240/ebebeb/808080/?text=Immagine"class="figure-img img-fluid rounded"alt="Segnaposto"></figure></div><p>
Testo utile a fornire una descrizione dei contenuti della sezione <strong>megamenu</strong>.
</p></div></div></div></div><divclass="col-12 col-lg-8"><divclass="it-heading-link-wrapper"><aclass="it-heading-link"href="#"><svgrole="img"class="icon icon-sm me-2 mb-1"><usehref="/dist/svg/sprites.svg#it-arrow-right-triangle"></use></svg><span>Esplora la sezione megamenu</span></a></div><divclass="row"><divclass="col-12 col-lg-6"><divclass="link-list-wrapper"><ulclass="link-list"><li><aclass="list-item dropdown-item"href="#"><svgrole="img"class="icon icon-sm me-2"><usehref="/dist/svg/sprites.svg#it-arrow-right-triangle"></use></svg><span>Link lista 1</span></a></li><li><aclass="list-item dropdown-item"href="#"><svgrole="img"class="icon icon-sm me-2"><usehref="/dist/svg/sprites.svg#it-arrow-right-triangle"></use></svg><span>Link lista 2</span></a></li><li><aclass="list-item dropdown-item "href="#"><svgrole="img"class="icon icon-sm me-2"><usehref="/dist/svg/sprites.svg#it-arrow-right-triangle"></use></svg><span>Link lista 3</span></a></li></ul></div></div><divclass="col-12 col-lg-6"><divclass="link-list-wrapper"><ulclass="link-list"><li><aclass="list-item dropdown-item"href="#"><svgrole="img"class="icon icon-sm me-2"><usehref="/dist/svg/sprites.svg#it-arrow-right-triangle"></use></svg><span>Link lista 4</span></a></li><li><aclass="list-item dropdown-item"href="#"><svgrole="img"class="icon icon-sm me-2"><usehref="/dist/svg/sprites.svg#it-arrow-right-triangle"></use></svg><span>Link lista 5</span></a></li><li><aclass="list-item dropdown-item "href="#"><svgrole="img"class="icon icon-sm me-2"><usehref="/dist/svg/sprites.svg#it-arrow-right-triangle"></use></svg><span>Link lista 6</span></a></li></ul></div></div></div></div></div></div></div></li></ul></div></div></nav></div></div></div></div></div></header>
Versione chiara
Nella versione light è consigliabile aggiungere la classe .it-shadow al tag <div class="it-header-wrapper">.
Verrà creata un’ombra per enfatizzare l’Header rispetto alla pagina in cui è contenuto.
<headerclass="it-header-wrapper it-shadow"><divclass="it-header-slim-wrapper theme-light"><divclass="container-xxl"><divclass="row"><divclass="col-12"><divclass="it-header-slim-wrapper-content"><aclass="d-block navbar-brand"href="#">Ente appartenenza</a><divclass="nav-mobile"><navaria-label="Navigazione secondaria"><divclass="link-list-wrapper d-none d-lg-flex"><ulclass="link-list"aria-label="Link utili"><li><aclass="list-item"href="#">Link 1</a></li><li><aclass="list-item active"href="#"aria-current="page">Link 2 (Attivo)</a></li></ul></div></nav></div><divclass="it-header-slim-right-zone"><divclass="nav-item dropdown"><aclass="nav-link dropdown-toggle"href="#"role="button"data-bs-toggle="dropdown"aria-expanded="false"><spanclass="visually-hidden">Selezione lingua: lingua selezionata</span><span>ITA</span><svgclass="icon d-none d-lg-block"><usehref="/dist/svg/sprites.svg#it-expand"></use></svg></a><divclass="dropdown-menu"><divclass="row"><divclass="col-12"><divclass="link-list-wrapper"><ulclass="link-list"><li><aclass="dropdown-item list-item"href="#"><span>ITA <spanclass="visually-hidden">selezionata</span></span></a></li><li><aclass="dropdown-item list-item"href="#"><span>ENG</span></a></li></ul></div></div></div></div></div><divclass="it-access-top-wrapper"><aclass="btn btn-primary btn-xs"href="#">Accedi</a></div></div></div></div></div></div></div><divclass="it-nav-wrapper"><divclass="it-header-center-wrapper theme-light"><divclass="container-xxl"><divclass="row"><divclass="col-12"><divclass="it-header-center-content-wrapper"><divclass="it-brand-wrapper"><ahref="#"><svgclass="icon"aria-hidden="true"><usehref="/dist/svg/sprites.svg#it-pa"></use></svg><divclass="it-brand-text"><divclass="it-brand-title">Nome dell'Istituzione</div><divclass="it-brand-tagline d-none d-md-block">Tag line dell'Istituzione</div></div></a></div><divclass="it-right-zone"><divclass="it-socials d-none d-md-flex"><span>Seguici su</span><ul><li><ahref="#"aria-label="Facebook"target="_blank"><svgclass="icon"><usehref="/dist/svg/sprites.svg#it-facebook"></use></svg></a></li><li><ahref="#"aria-label="Github"target="_blank"><svgclass="icon"><usehref="/dist/svg/sprites.svg#it-github"></use></svg></a></li><li><ahref="#"aria-label="Twitter"target="_blank"><svgclass="icon"><usehref="/dist/svg/sprites.svg#it-twitter"></use></svg></a></li></ul></div><divclass="it-search-wrapper"><spanclass="d-none d-md-block">Cerca</span><aclass="search-link rounded-icon"aria-label="Cerca nel sito"href="#"><svgclass="icon"><usehref="/dist/svg/sprites.svg#it-search"></use></svg></a></div></div></div></div></div></div></div><divclass="it-header-navbar-wrapper theme-light"><divclass="container-xxl"><divclass="row"><divclass="col-12"><!--start nav--><navclass="navbar navbar-expand-lg"aria-label="Navigazione principale"><buttonclass="custom-navbar-toggler"type="button"aria-controls="navC2"aria-label="Mostra/Nascondi la navigazione"data-bs-toggle="navbarcollapsible"data-bs-target="#navC2"><svgclass="icon"><usehref="/dist/svg/sprites.svg#it-burger"></use></svg></button><divclass="navbar-collapsable"id="navC2"tabindex="-1"><divclass="close-div"><buttonclass="btn close-menu"type="button"><spanclass="visually-hidden">Nascondi la navigazione</span><svgclass="icon"><usehref="/dist/svg/sprites.svg#it-close-big"></use></svg></button></div><divclass="menu-wrapper"><ulclass="navbar-nav"><liclass="nav-item active"><aclass="nav-link active"href="#"aria-current="page"><span>Link attivo</span></a></li><liclass="nav-item"><aclass="nav-link disabled"href="#"aria-disabled="true"><span>Link disabilitato</span></a></li><liclass="nav-item dropdown"><aclass="nav-link dropdown-toggle"href="#"role="button"data-bs-toggle="dropdown"aria-expanded="false"id="mainNavDropdownC2"><span>Dropdown</span><svgclass="icon icon-xs"><usehref="/dist/svg/sprites.svg#it-expand"></use></svg></a><divclass="dropdown-menu"role="region"aria-labelledby="mainNavDropdownC2"><divclass="link-list-wrapper"><ulclass="link-list"><li><aclass="dropdown-item list-item"href="#"><span>Link lista 1</span></a></li><li><aclass="dropdown-item list-item"href="#"><span>Link lista 2</span></a></li><li><aclass="dropdown-item list-item"href="#"><span>Link lista 3</span></a></li><li><spanclass="divider"></span></li><li><aclass="dropdown-item list-item"href="#"><span>Link lista 4</span></a></li></ul></div></div></li><!-- megamenu --><liclass="nav-item dropdown megamenu"><buttontype="button"class="nav-link dropdown-toggle px-lg-2 px-xl-3"data-bs-toggle="dropdown"aria-expanded="false"id="megamenu-6"data-focus-mouse="false"><span>Megamenu</span><svgrole="img"class="icon icon-xs"><usehref="/dist/svg/sprites.svg#it-expand"></use></svg></button><divclass="dropdown-menu shadow-lg"role="region"aria-labelledby="megamenu-6"><divclass="megamenu-content"><divclass="row"><divclass="col-xs-12 col-lg-4 px-0"><divclass="row"><divclass="col-12 it-vertical it-description pb-lg-3"><divclass="description-content px-4 ps-sm-5 ms-3"><divclass="ratio ratio-21x9 lightgrey-bg-a1 mb-4 rounded"><figureclass="figure"><imgsrc="https://placehold.co/560x240/ebebeb/808080/?text=Immagine"class="figure-img img-fluid rounded"alt="Segnaposto"></figure></div><p>
Testo utile a fornire una descrizione dei contenuti della sezione <strong>megamenu</strong>.
</p></div></div></div></div><divclass="col-12 col-lg-8"><divclass="it-heading-link-wrapper"><aclass="it-heading-link"href="#"><svgrole="img"class="icon icon-sm me-2 mb-1"><usehref="/dist/svg/sprites.svg#it-arrow-right-triangle"></use></svg><span>Esplora la sezione megamenu</span></a></div><divclass="row"><divclass="col-12 col-lg-6"><divclass="link-list-wrapper"><ulclass="link-list"><li><aclass="list-item dropdown-item"href="#"><svgrole="img"class="icon icon-sm me-2"><usehref="/dist/svg/sprites.svg#it-arrow-right-triangle"></use></svg><span>Link lista 1</span></a></li><li><aclass="list-item dropdown-item"href="#"><svgrole="img"class="icon icon-sm me-2"><usehref="/dist/svg/sprites.svg#it-arrow-right-triangle"></use></svg><span>Link lista 2</span></a></li><li><aclass="list-item dropdown-item "href="#"><svgrole="img"class="icon icon-sm me-2"><usehref="/dist/svg/sprites.svg#it-arrow-right-triangle"></use></svg><span>Link lista 3</span></a></li></ul></div></div><divclass="col-12 col-lg-6"><divclass="link-list-wrapper"><ulclass="link-list"><li><aclass="list-item dropdown-item"href="#"><svgrole="img"class="icon icon-sm me-2"><usehref="/dist/svg/sprites.svg#it-arrow-right-triangle"></use></svg><span>Link lista 4</span></a></li><li><aclass="list-item dropdown-item"href="#"><svgrole="img"class="icon icon-sm me-2"><usehref="/dist/svg/sprites.svg#it-arrow-right-triangle"></use></svg><span>Link lista 5</span></a></li><li><aclass="list-item dropdown-item "href="#"><svgrole="img"class="icon icon-sm me-2"><usehref="/dist/svg/sprites.svg#it-arrow-right-triangle"></use></svg><span>Link lista 6</span></a></li></ul></div></div></div></div></div></div></div></li></ul></div></div></nav></div></div></div></div></div></header>
Attivazione tramite codice
L’unica funzionalità del componente Header che necessita l’attivazione tramite
codice è quella in cui si desidera che lo stesso si comporti in maniera sticky
ovvero con la testata sempre visibile in formato ridotto anche allo scorrere
della pagina.
Nel caso in cui si desidera che il componente sia inizializzato in maniera automatica
utilizzare l’attributo data-bs-toggle specifico per la sua inizializzazione.
Nel caso in cui si desidera importare e inizializzare autonomamente il componente
l’attributo data-bs-toggle specifico non deve essere incluso così da evitare
inizializzazioni automatiche che possono portare a comportamenti inaspettati.
Per rendere sticky il componente Header automaticamente, è sufficiente
utilizzare la classe .it-header-sticky nell’elemento identificato con la
classe .it-header-wrapper insieme all’attributo data-bs-toggle="sticky".
Per maggiori informazioni e ulteriori opzioni vedere il componente Sticky e l’esempio.
Inizializzazione manuale
Il componente Header solitamente contiene al suo interno i componenti Dropdown,
NavScroll e Collapse, si rimanda alle sezioni specifiche per l’attivazione di questi componenti:
Metodo statico che consente di ottenere l'istanza di avviso associata a un elemento DOM, è possibile utilizzarlo in questo modo: HeaderSticky.getInstance(domElement).
getOrCreateInstance
Metodo statico che restituisce un'istanza di avviso associata a un elemento DOM o ne crea una nuova nel caso in cui non fosse stata inizializzata. Puoi utilizzarla in questo modo: HeaderSticky.getOrCreateInstance(element).
dispose
Rimuove la funzionalità HeaderSticky.
Properties Nav
Il selettore da utilizzare per le sovrascrittura delle property è .nav.
La descrizione delle custom properties è in inglese perché risiede nei files .scss dei componenti.
Properties statiche
Variabile CSS
Descrizione (Inglese)
Valore predefinito
--bsi-nav-link-disabled-color
Controls the disabled link color for the nav, using color tokens.
var(--bsi-color-text-disabled)
--bsi-nav-link-padding-x
Controls the horizontal padding for nav links, using spacing tokens.
var(--bsi-spacing-s)
--bsi-nav-link-padding-y
Controls the vertical padding for nav links, using spacing tokens.
var(--bsi-spacing-s)
Properties Navbar
Il selettore da utilizzare per le sovrascrittura delle property è .navbar.
La descrizione delle custom properties è in inglese perché risiede nei files .scss dei componenti.
Properties statiche
Variabile CSS
Descrizione (Inglese)
Valore predefinito
--bsi-navbar-brand-color
Controls the navbar brand color, using color tokens.
var(--bsi-color-text-inverse)
--bsi-navbar-brand-font-size
Controls the navbar brand font size, using size tokens.
var(--bsi-label-font-size)
--bsi-navbar-brand-margin-end
Controls the navbar brand margin end.
var(--bsi-spacing-s)
--bsi-navbar-brand-padding-y
Controls the navbar brand padding y.
var(--bsi-spacing-xxs)
--bsi-navbar-close-button-font-size
Controls the navbar close button font size.
0.75rem
--bsi-navbar-close-button-size
Controls the navbar close button size.
44px
--bsi-navbar-close-button-text-color
Controls the navbar close button text color, using color tokens.
var(--bsi-color-text-inverse)
--bsi-navbar-collapsable-zindex
Controls the z-index for the collapsable navbar overlay. default matching the modal's.
1055
--bsi-navbar-disabled-item-opacity
Controls the navbar disabled item opacity.
0.75
--bsi-navbar-hamburger-size
Controls the navbar hamburger size.
1.5rem
--bsi-navbar-link-border-size
Controls the navbar link border size, using border tokens.
var(--bsi-border-thick)
--bsi-navbar-link-font-size
Controls the navbar link font size, using typography tokens.
var(--bsi-label-font-size-l)
--bsi-navbar-link-line-height
Controls the navbar link line height, using typography tokens.
var(--bsi-label-leading)
--bsi-navbar-link-padding-y
Controls the navbar link padding y, using spacing tokens.
var(--bsi-spacing-s)
--bsi-navbar-overlay-bg
Controls the navbar overlay bg.
rgba(0, 0, 0, 0.6)
--bsi-navbar-toggle-button-icon-size
Controls the navbar toggle button icon size.
1.5rem
Properties dinamiche
Nella colonna "Valore predefinito" è possibile trovare, oltre al valore di base, un’indicazione delle eventuali varianti responsive/tema/stato della property stessa:
fare riferimento ai file elencati nella colonna "File SCSS" per il dettaglio dei valori e del contesto di applicazione.
Variabile CSS
Descrizione (Inglese)
Valore predefinito
File SCSS
--bsi-navbar-background
Controls the navbar background, using color tokens.
var(--bsi-color-background-primary)+2
_navbar.scss
--bsi-navbar-link-active-border-color
var(--bsi-color-border-primary)+3
_navbar.scss
--bsi-navbar-link-color
Nav link color default - mobile, using color tokens.
var(--bsi-color-link)+3
_navbar.scss
--bsi-navbar-link-font-weight
Controls the navbar link font weight, using typography tokens.
var(--bsi-font-weight-solid)+1
_navbar.scss
--bsi-navbar-link-padding-x
Controls the navbar link padding x, using spacing tokens.
var(--bsi-spacing-m)+1
_navbar.scss
--bsi-navbar-toggle-button-icon-color
Controls the navbar toggle button icon color, using icon tokens.
var(--bsi-icon-inverse)+2
_navbar.scss
Properties Header Navbar
Il selettore da utilizzare per le sovrascrittura delle property è .it-header-navbar-wrapper.
La descrizione delle custom properties è in inglese perché risiede nei files .scss dei componenti.
Properties statiche
Variabile CSS
Descrizione (Inglese)
Valore predefinito
--bsi-header-brand-tagline-size
Controls the brand tagline size for the header, using font tokens
var(--bsi-body-font-size)
--bsi-header-center-font-size
Controls the center font size for the header, using font tokens.
var(--bsi-label-font-size-s)
--bsi-header-nav-secondary-font-size
Controls the nav secondary font size for the header, using font tokens
var(--bsi-label-font-size-s)
--bsi-header-search-icon-size
Controls the header search icon size.
1.5rem
--bsi-header-slim-font-size
Controls the slim font size for the header, using font tokens.
var(--bsi-label-font-size-s)
--bsi-header-slim-height
Controls the header slim height.
3rem
--bsi-header-spacing-inset
Controls the inset spacing for the header, using spacing tokens.
var(--bsi-spacing-xxs)
Properties dinamiche
Nella colonna "Valore predefinito" è possibile trovare, oltre al valore di base, un’indicazione delle eventuali varianti responsive/tema/stato della property stessa:
fare riferimento ai file elencati nella colonna "File SCSS" per il dettaglio dei valori e del contesto di applicazione.
Variabile CSS
Descrizione (Inglese)
Valore predefinito
File SCSS
--bsi-header-brand-color
Controls the brand color for the header, using color tokens.
var(--bsi-color-text-inverse)+2
_header.scss _navbar.scss
--bsi-header-brand-icon-color
Controls the brand icon color for the header, using icon tokens.
var(--bsi-icon-inverse)+2
_header.scss _navbar.scss
--bsi-header-brand-size
Controls the header brand size.
2.5rem+2
_header.scss
--bsi-header-brand-title-size
Controls the brand title size for the header, using font tokens.
var(--bsi-heading-5-font-size)+1
_header.scss
--bsi-header-center-background
Controls the center background for the header, using color tokens.
var(--bsi-color-background-primary)+1
_header.scss
--bsi-header-center-height
Controls the header center height.
4.5rem+3
_header.scss _headercenter.scss
--bsi-header-center-text-color
Controls the center text color for the header, using color tokens
var(--bsi-color-text-inverse)+1
_header.scss
--bsi-header-nav-background
Controls the nav background for the header, using color tokens
var(--bsi-color-background-primary)+1
_header.scss
--bsi-header-nav-text-color
Controls the nav text color for the header, using color tokens
var(--bsi-color-link)+1
_header.scss
--bsi-header-search-button-size
Controls the header search button size.
3rem+1
_header.scss _headercenter.scss
--bsi-header-search-icon-color
Controls the search icon color for the header, using icon tokens.
var(--bsi-icon-inverse)+1
_header.scss
--bsi-header-slim-background
Controls the header slim background, using color tokens.
var(--bsi-color-blue-30)+1
_header.scss
--bsi-header-slim-border-color
Controls the header slim border color.
hsla(0, 0%, 100%, 0.2)+1
_header.scss
--bsi-header-slim-text-color
Controls the slim text color for the header, using color tokens.
var(--bsi-color-text-inverse)+1
_header.scss
--bsi-header-social-color
Controls the social color for the header, using icon tokens.
var(--bsi-icon-inverse)+2
_header.scss _headercenter.scss
Breaking change
Rimossa la variante theme-light-desk per Header Nav, ora è possibile impostare il tema chiaro con la class .theme-light al tag <nav class="it-header-navbar-wrapper">.
Rimossa la variante theme-dark-mobile: le voci del menu su mobile hanno sempre sfondo bianco e link nel colore primario.
I link accessori dello Slim Header non sono più raccolti in un menu a tendina che si apre dal nome dell’ente: su mobile confluiscono nel menu di navigazione insieme al logo e ai social. Negli esempi il pulsante .it-opener è stato rimosso e l’elenco è nascosto sotto il breakpoint lg con .d-none.d-lg-flex. Le regole di stile di .it-opener restano disponibili per retrocompatibilità ma sono da considerarsi deprecate.
Cambiata la dimensione del pulsante Accedi: cambiato classe da .btn-sm a .btn-sx.
Rimossa la classe .ms-1 dall’icona <svg> che segue la voce Megamenu negli esempi.
La navbar presente negli esempi, quando aperta in versione mobile o a forte ingrandimento, è stata reimplementata come modale per migliorare l’accessibilità con le combinazioni principali di lettori di schermo, sistema operativo e browser. Modifiche principali:
struttura: la navbar ora utilizza un pattern dialog con backdrop
gerarchia visiva: la gestione z-index è allineata al componente modale
gestione del focus: implementato focus-trap.js per utenti da tastiera e lettori di schermo, e gestione inert
il comportamento è diverso se implementata dentro o fuori dall’elemento main di pagina (se presente)
Se hai personalizzato il CSS della navbar, rivedi le tue modifiche per verificarne la compatibilità. Se hai modificato il comportamento JavaScript, assicurati che funzioni con il nuovo pattern dialog. Testa la tua implementazione con lettori di schermo e con utenti per verificarne l’accessibilità.
Il toggle del dropdown diventa <button> invece di <a>.
Gli altri elementi <a> che si comportano come toggle dropdown (eg. scelta Lingua), hanno l’aggiunta dell’attributo role="button".
Il markup del Megamenu cambia come nel nuovo componente, per approfondire andare alla relativa pagina.