Header
Header applicativi Web.
La componente Header - posta sempre nella testata del layout - si ottiene dall’unione di due altre componenti: topbar e barra istituzionale.
La topbar, la barra soprastante l’header, verrà sempre utilizzata come componente identitaria di Regione Lombardia e, anche nel caso non contenga alcuna funzionalità, essa sarà presente sotto forma di banda colorata. In alcuni casi tale componente può essere impiegata come toolbar di servizio per l’inserimento di link quali login, cambio lingua, assistenza ecc.
La componente barra istituzionale, fornita in diverse varianti, applicabili a seconda del dato contesto, conterrà menu di navigazione (hamburger o dropdown), loghi e titolazioni dei servizi.
N.B.: I link di servizio e le informazioni di governance relative al servizio non sono mai presenti nell’header, ma sono contenute unicamente nel footer.
Header Base
In questo esempio è riportato un header base con topbar, barra istituzionale, logo di Regione Lombardia e nome del servizio.
<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="#">
<img src="/bootstrap-lombardia/dist/assets/img/logo-rl-bianco.png" alt="logo regione lombardia" class="d-md-none" />
</a>
</div>
</div>
</div>
</div>
</div>
<div class="it-header-center-wrapper it25-barra-ist">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="it-header-center-content-wrapper">
<div class="it-brand-wrapper">
<a href="#">
<img src="/bootstrap-lombardia/dist/assets/img/logo-rl.png"
alt="logo regione lombardia" class="it25-header-logo d-none d-md-block" />
<div class="it-brand-text">ACRONIMO Nome applicativo</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>Header con topbar di servizio e search field
La topbar può accogliere informazioni come ad esempio l’accesso utente.
Nel caso in cui il servizio lo richieda, è possibile aggiungere un campo di ricerca generico all’interno della barra istituzionale nella parte destra.
<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="#">
<img src="/bootstrap-lombardia/dist/assets/img/logo-rl-bianco.png" alt="logo regione lombardia" class="d-md-none" />
</a>
<div class="header-slim-right-zone">
<a class="btn btn-primary btn-icon btn-full" href="#" title="Accedi all'area personale" aria-label="Accedi all'area personale">
<svg class="icon icon-white">
<use xlink:href="/bootstrap-lombardia/dist/svg/sprites.svg#it-key"></use>
</svg>
<span class="d-none d-md-block">Accedi</span>
<span class="d-none d-md-block fst-italic">o Registrati</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="it-header-center-wrapper it25-barra-ist">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="it-header-center-content-wrapper">
<div class="it-brand-wrapper">
<a href="#">
<img src="/bootstrap-lombardia/dist/assets/img/logo-rl.png" alt="logo regione lombardia" class="it25-header-logo d-none d-md-block" />
<div class="it-brand-text">ACRONIMO Nome applicativo</div>
</a>
</div>
<div class="it-right-zone">
<form>
<div class="it-search-wrapper">
<input id="search-input99" class="form-control d-none d-lg-flex mr-sm-2 ml-auto" type="search" placeholder="Cerca..." aria-label="Testo per ricerca">
<button class="btn p-0 m-1" type="submit" aria-label="Esegui ricerca">
<svg class="icon"><use xlink:href="/bootstrap-lombardia/dist/svg/sprites.svg#it-search"></use></svg>
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>Header con accesso effettuato e dropdown
Il menu dropdown può contenere informazioni utili per il login, il logout e la gestione del profilo utente e delle impostazioni. Queste info possono essere relative all’utente e all’operatore che sta utilizzando il servizio.
La dimensione del menu dropdown può variare a seconda delle esigenze, come ad esempio per accogliere una maggiore lunghezza delle voci al suo interno.
<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="#">
<img src="/bootstrap-lombardia/dist/assets/img/logo-rl-bianco.png" alt="logo regione lombardia" class="d-md-none" />
</a>
<div class="header-slim-right-zone">
<div class="nav-item dropdown">
<a aria-expanded="false" class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" href="#" data-bs-display="static">
<span>Lorem ipsum dolor sit</span>
<svg class="icon icon-white">
<use xlink:href="/bootstrap-lombardia/dist/svg/sprites.svg#it-user"></use>
</svg>
<svg class="icon icon-white">
<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>Lorem ipsum dolor sit</span></a>
</li>
<li>
<a class="list-item" href="#"><span>Lorem ipsum dolor sit</span></a>
</li>
<li>
<a class="list-item" href="#"><span>Lorem ipsum dolor sit</span></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="it-header-center-wrapper it25-barra-ist">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="it-header-center-content-wrapper">
<div class="it-brand-wrapper">
<a href="#">
<img src="/bootstrap-lombardia/dist/assets/img/logo-rl.png" alt="logo regione lombardia" class="it25-header-logo d-none d-md-block" />
<div class="it-brand-text">ACRONIMO Nome applicativo</div>
</a>
</div>
<div class="it-right-zone">
<form>
<div class="it-search-wrapper">
<input id="search-input99" class="form-control d-none d-lg-flex mr-sm-2 ml-auto" type="search" placeholder="Cerca..." aria-label="Testo per ricerca">
<button class="btn p-0 m-1" type="submit" aria-label="Esegui ricerca">
<svg class="icon"><use xlink:href="/bootstrap-lombardia/dist/svg/sprites.svg#it-search"></use></svg>
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>Bottone hamburger
Il bottone hamburger serve per aprire il menu verticale.
Compare automaticamente sugli schermi di piccole dimensioni a sinistra nella barra istituzionale.
<div class="it25-hamburger-btn-wrapper">
<button
id="btn-hamburger"
aria-controls="it25-main-nav"
aria-expanded="false"
aria-label="Apri menù"
class="btn btn-xs d-md-none"
data-bs-toggle="collapse"
data-bs-target="#it25-main-nav"
type="button"
>
<svg class="icon icon-primary">
<use xlink:href="/dist/svg/sprites.svg#it-burger"></use>
</svg>
</button>
</div>Deve essere inserito nell’header solo se la pagina contiene il menu verticale, all’interno di:
<div class="it-brand-wrapper">prima del link contenente il logo.
Per attivare la commutazione automatica dell’aspetto del bottone tra hamburger e “X” di chiusura, è necessario invocare la funzione :
bootstrap.it25Header()
Per un esempio di funzionamento all’interno di una pagina completa, si veda la Tabella complessa.