Header

Header applicativi Web.

Area di intestazione principale di un sito o servizio che presenta l’identità visiva e il menu di navigazione primaria.

Il logotipo di Regione Lombardia si trova nella topbar per lasciare spazio al logo dell’applicativo.
In questo modo la brand identity del sito rimane riconoscibile sottolineando la sua affiliazione con l’ecosistema digitale.

Navigazione orizzontale

Se le voci di menu di primo livello non sono più di 5, sono disposte orizzontalmente nell’header.
Solo se necessario l’header può ospitare fino a un massimo di tre logotipi.
In caso l’applicativo non abbia un logo può essere usato un acronimo e/o il nome dell’applicativo.

Se le voci di menu di primo livello sono più di 5, vanno collocate in un menù verticale a comparsa, comandato da un hamburger button.

Accesso area privata

La topbar può essere impiegata come toolbar di servizio inserendo voci quali login, cambio lingua, assistenza ecc.

Il menu dropdown può contenere link utili per il logout e la gestione del profilo e delle impostazioni utente.

Comportamento scroll

Allo scroll down:

la topbar sparisce
il center header
- se il menù è orizzontale, sparisce
  e logo e pulsante cerca vengono clonati nella navbar orizzontale
- se il menu è verticale, diminuisce in altezza.

Scrollando al top della pagina l’header torna alla versione completa.

Per vedere il comportamento dell’header e dei diversi tipi di menù di navigazione, e il loro funzionamento all’interno di pagine complete, si vedano le pagine degli esempi.

Esempi

Nota:
Per ogni link si apre un tab separato in cui compare una pagina intera di esempio.
Può essere utile “staccarla” dalle altre per provare anche vedere la responsività della stessa quando si variano le dimensioni della finestra portandole a livello tablet e smartphone.

menu orizzontale
menu verticale
sidebar

Utilizzo del componente

L’header è costruito sulla base del componente header di bootstrap-italia che è composto da tre parti:

topbar equivalente allo slim header
header centrale
navbar il menu di navigazione che può essere orizzontale, verticale o sidebar.

Il Design System di Regione Lombardia prevede l’utilizzo dell’header di tipo sticky.
Quindi gli attributi html del tag <header> tipicamente sono:

<header class="it-header-wrapper it-header-sticky"
  data-bs-position-type="fixed"
  data-bs-toggle="sticky"
  data-bs-target="#header-nav-wrapper"
  data-bs-sticky-class-name="is-sticky">

cui segue, a seconda del tipo di menù utilizzato:

orizzontale

  {% include html_docs/header/topbar.html %}
  <div class="it-nav-wrapper">
    {% include html_docs/header/center_menu-oriz.html %}
    {% include html_docs/header/navbar_oriz.html %}
  </div>
</header>

verticale

   {% include html_docs/header/topbar.html %}
   {% include html_docs/header/center_menu-vert.html %}
    <div id="it25-menu-vert">
     {% include html_docs/menu-verticale/menu-verticale-annidato.html %}
    </div>
</header>

   {% include html_docs/header/topbar.html %}
   {% include html_docs/header/center_sidebar.html %}
</header>

<main>
  <div class="container-fluid">
    <div class="row flex-xl-nowrap">
      <div class="col-12 col-md-3 col-xl-2 it25-sidebar">
      {% include html_docs/menu-verticale/menu-verticale-annidato.html %}
      </div>
      <div class="col-12 col-md-9">
        <h1>Nome form</h1>
        <form class="my-5 px-5" id="justValidate" action="index.html" method="post">
. . .

In questo caso il menu-verticale-annidato è inserito nel <main> della pagina.

La stuttura html della topbar è la seguente:

  <div class="it-header-slim-wrapper it25-top-bar">
    <div class="container-fluid">
      <div class="row">
        <div class="col-12">
          <div class="it-header-slim-wrapper-content">
            <a class="navbar-brand" href="#" aria-label="link sito regione lombardia">
              <img src="/bootstrap-lombardia/dist/assets/img/logo-rl-negativo.svg" alt="logo regione lombardia" />
            </a>
            <div class="it-header-slim-right-zone">
              
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

All’interno del <div class="it-header-slim-right-zone"> vanno posti i dropdown adatti all’applicativo:

<div class="nav-item">
  <a href="#" class="d-none d-md-block">Esplora i siti di Regione
    <svg class="icon"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-external-link"></use></svg>
  </a>
</div>

<!-- scelta lingua -->
<div class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Selezione lingua: lingua selezionata</span>
    <span>ITA</span>
    <svg class="icon"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-expand"></use></svg>
  </a>
  <div class="dropdown-menu">
    <div class="row">
      <div class="col-12">
        <div class="link-list-wrapper">
          <ul class="link-list">
            <li><a class="dropdown-item list-item" href="#"><span>ITA<span class="visually-hidden">selezionata</span></span></a></li>
            <li><a class="dropdown-item list-item" href="#"><span>ENG</span></a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>



<!-- funzioni per utente loggato -->
<div class="nav-item dropdown d-inline">
  <a aria-expanded="false" class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" href="#" data-bs-display="static">
    <span>Nome Cognome</span>
    <svg class="icon icon-white" aria-label="utente">
      <use xlink:href="/bootstrap-lombardia/dist/svg/sprites.svg#it-user"></use>
    </svg>
    <svg class="icon icon-white" aria-label="espandi">
      <use xlink:href="/bootstrap-lombardia/dist/svg/sprites.svg#it-expand"></use>
    </svg>
  </a>
  <div class="dropdown-menu" data-popper-placement="bottom-end">
    <div class="link-list-wrapper">
      <ul class="link-list">
        <li>
          <a class="list-item" href="#"><span>Impostazioni</span></a>
        </li>
        <li>
          <a class="list-item" href="#"><span>Voce 2</span></a>
        </li>
        <li>
          <a class="list-item" href="#"><span>Voce 3</span></a>
        </li>
        <li>
          <a class="list-item" href="#"><span>Voce 4</span></a>
        </li>
        <li>
          <span class="divider" role="separator"></span>
        </li>
        <li>
          <a class="list-item" href="#">
            <svg class="icon icon-primary">
              <use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-logout"></use>
            </svg>
            <span>Logout</span>
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>



<!-- pulsante login utente -->
<div class="it-access-top-wrapper">
  <a class="btn btn-primary" href="#">ACCEDI
    <svg class="icon icon-white d-inline" aria-label="utente">
      <use xlink:href="/bootstrap-lombardia/dist/svg/sprites.svg#it-user"></use>
    </svg>
  </a>
</div>

Center

Il codice per la parte centrale cambia leggermente a seconda del tipo di menù di navigazione pincipale scelto.

orizzontale

    <div class="it-header-center-wrapper">
      <div class="container-fluid">
        <div class="row">
          <div class="col-12">

            <div class="it-header-center-content-wrapper d-flex justify-content-between">

              <div class="it25-left-zone d-flex justify-content-start">
                <div class="it-brand-wrapper d-flex">
                  
                  <a href="#">
                    <img src="/bootstrap-lombardia/dist/assets/img/logo_inlombardia.svg" alt="logo in lombardia" class="it25-header-logo" />
                  </a>
                  
                  <div class="it-brand-text">
                    <div class="it-brand-title d-inline">
                    
                      <span class="it25-text-logo">Text Logo </span>
                    
                     <span class="it25-app-name d-none d-md-inline">Nome applicativo</span>
                     </div>
                  </div>
                </div>
              </div>

              <div class="it-right-zone">
                
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>

verticale

    <div class="it-header-center-wrapper it25-header-menu-vert py-1" id="header-nav-wrapper">
      <div class="container-fluid">
        <div class="row">
          <div class="col-12">
            <div class="it-header-center-content-wrapper d-flex justify-content-between">

              <div class="it25-left-zone  d-flex justify-content-start">
                <div class="it25-hamburger-btn-wrapper">
                  <button
                    id="btn-hamburger"
                    class="btn btn-xs"
                    type="button"
                    aria-controls="it25-main-nav"
                    aria-expanded="false"
                    aria-label="Apri menù"
                    data-bs-toggle="collapse"
                    data-bs-target="#it25-main-nav"
                  >
                    <svg class="icon icon-sm icon-primary" role="presentation">
                      <use xlink:href="/bootstrap-lombardia/dist/svg/sprites.svg#it-burger"></use>
                    </svg>
                  </button>
                </div>

                <div class="it-brand-wrapper d-flex justify-content-start">
                  
                  <a href="#">
                    <img src="/bootstrap-lombardia/dist/assets/img/logo_inlombardia.svg" alt="logo in lombardia" class="it25-header-logo" />
                  </a>
                  
                  <div class="it-brand-text">
                    <div class="it-brand-title d-inline">
                    
                      <span class="it25-text-logo">Text Logo </span>
                    
                    <span class="it25-app-name d-none d-md-inline">Nome applicativo</span>
                    </div>
                  </div>
                </div>
              </div>

              <div class="it-right-zone">
                <div class="it-search-wrapper">
                  <span class="d-none d-md-block">Cerca</span>
                  <a class="search-link rounded-icon" aria-label="Cerca nel sito" href="#">
                    <svg class="icon icon-sm"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-search"></use></svg>
                  </a>
                </div>
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="it-header-center-wrapper it25-header-sidebar" id="header-nav-wrapper">
      <div class="container-fluid">
        <div class="row">
          <div class="col-12">
            <div class="it-header-center-content-wrapper d-flex justify-content-between">

              <div class="it25-left-zone  d-flex justify-content-start">
                <div class="it25-hamburger-btn-wrapper">
                  <button
                    id="btn-hamburger"
                    class="custom-navbar-toggler btn btn-xs d-md-none"
                    type="button"
                    aria-controls="it25-main-nav"
                    aria-expanded="false"
                    aria-label="Apri menù"
                    data-bs-toggle="collapse"
                    data-bs-target="#it25-main-nav"
                  >
                    <svg class="icon icon-primary" role="presentation">
                      <use xlink:href="/bootstrap-lombardia/dist/svg/sprites.svg#it-burger"></use>
                    </svg>
                  </button>
                </div>

                <div class="it-brand-wrapper d-flex justify-content-start">
                  
                  <a href="#">
                    <img src="/bootstrap-lombardia/dist/assets/img/logo_inlombardia.svg" alt="logo in lombardia" class="it25-header-logo" />
                  </a>
                  
                  <div class="it-brand-text">
                    <div class="it-brand-title d-inline">
                    
                      <span class="it25-text-logo">Text Logo </span>
                    
                    <span class="it25-app-name d-none d-md-inline">Nome applicativo</span>
                    </div>
                  </div>
                </div>
              </div>

              <div class="it-right-zone">
                <div class="it-search-wrapper">
                  <span class="d-none d-md-block">Cerca</span>
                  <a class="search-link rounded-icon" aria-label="Cerca nel sito" href="#">
                    <svg class="icon icon-sm"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-search"></use></svg>
                  </a>
                </div>
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>

Nota: Nel caso non esistano né logo né acronimo, e quindi l’unica cosa che compare nel center sia il nome dell’applicativo, vanno tolte le classi d-none d-md-inline dal tag

<span class="it25-app-name d-inline">Nome applicativo</span>

e sostituite con d-inline, in modo che il nome applicativo compaia anche sugli schermi di piccole dimensioni.
Naturalmente, se il nome apllicativo è molto lungo, si può decidere di visualizzarne, sugli schermi piccoli, una versione abbreviata sempre giocando sulle classi Display

Attivazione

Per attivare il funzionamento di tutti i tipi di menù, è necessario invocare la funzione :

bootstrap.it25Header()

Breaking change

Nuovo Header

Cambiamento struttura
Comportamento di default: riduzione dimensioni allo scroll verso il basso.
Duplicazione del logo applicativo nella navbar del menu orizzontale.

Bootstrap Regione Lombardia

Versione di Bootstrap Italia per la Regione Lombardia per lo sviluppo di applicazioni web per la PA

Header

Header

Navigazione orizzontale

Argomenti

Argomenti

Hamburger menu

Accesso area privata

Comportamento scroll

Esempi

Utilizzo del componente

Sticky header

orizzontale

verticale

sidebar

Topbar

Center

orizzontale

verticale

sidebar

Attivazione

Breaking change

Header

Header

Navigazione orizzontale

Argomenti

Argomenti

Hamburger menu

Accesso area privata

Comportamento scroll

Esempi

Utilizzo del componente

Sticky header

orizzontale

verticale

sidebar

Topbar

Center

orizzontale

verticale

sidebar

Attivazione

Breaking change

Breaking change dalla versione 2.7.0