Menu orizzontale
Menù principale di navigazione
Il Menu orizzontale è il menu principale di navigazione. Esso può contenere, oltre a semplici link, il menu dropdown ed il megamenu.
Su desktop il menu è sempre visualizzato e a scorrimento in basso e rimane posizionato fisso sotto la barra istituzionale. Se la pagina scorre, il menu si sposta di conseguenza, rimanendo sotto la barra istituzionale.
Questa tipologia di menu viene preferita al menu verticale quando le voci del menu sono al massimo 5 e le label sono brevi.
Su smartphone la visualizzazione del menu orizzontale è comandata dal bottone hamburger nella barra istituzionale e le voci sono visualizzate in verticale per questioni di spazio. In questo caso il pannello comparirà con uno scorrimento laterale da sinistra ed oscuramento della pagina sottostante.
<div class="it-header-navbar-wrapper theme-light-desk it25-menu-orizzontale">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<nav class="navbar navbar-expand-lg has-megamenu">
<div class="d-inline-flex">
<button class="custom-navbar-toggler" type="button" aria-controls="nav1" aria-expanded="false"
aria-label="Mostra/Nascondi la navigazione" data-bs-toggle="navbarcollapsible" data-bs-target="#nav1">
<svg class="icon icon-primary">
<use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-burger"></use>
</svg>
</button>
<div class="d-block d-lg-none align-self-center text-primary fw-semibold ms-2">Apri Menu</div>
</div>
<div class="navbar-collapsable" id="nav1">
<div class="overlay"></div>
<div class="close-div">
<button class="btn close-menu" type="button">
<span class="visually-hidden">Nascondi la navigazione</span>
<svg class="icon">
<use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-close-big"></use>
</svg>
</button>
</div>
<div class="menu-wrapper">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#"><span>Link</span></a>
</li>
<li class="nav-item active">
<a class="nav-link active" href="#"><span>Attivo</span><span class="visually-hidden">voce selezionata</span></a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#"><span>Disabled</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<span>Dropdown</span>
<svg class="icon icon-xs">
<use xlink:href="/bootstrap-lombardia/dist/svg/sprites.svg#it-expand"></use>
</svg>
</a>
<div class="dropdown-menu">
<div class="link-list-wrapper">
<ul class="link-list">
<li>
<span class="link-list-heading text-primary fw-bold">Heading</span>
</li>
<li>
<a class="list-item" href="#"><span>Link list 1</span></a>
</li>
<li>
<a class="list-item" href="#"><span>Link list 2</span></a>
</li>
<li>
<a class="list-item" href="#"><span>Link list 3</span></a>
</li>
<li><span class="divider"></span></li>
<li>
<a class="list-item" href="#"><span>Link list 4</span></a>
</li>
</ul>
</div>
</div>
</li>
<li class="nav-item dropdown megamenu">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span>Megamenu</span>
<svg class="icon icon-xs">
<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="row">
<div class="col-12 col-lg-4">
<div class="link-list-wrapper">
<ul class="link-list">
<li>
<span class="link-list-heading text-primary fw-bold">Heading 1</span>
</li>
<li>
<a class="list-item" href="#"><span>Link list 1 </span></a>
</li>
<li>
<a class="list-item" href="#"><span>Link list 2 </span></a>
</li>
<li>
<a class="list-item" href="#"><span>Link list 3 </span></a>
</li>
</ul>
</div>
</div>
<div class="col-12 col-lg-4">
<div class="link-list-wrapper">
<ul class="link-list">
<li>
<span class="link-list-heading text-primary fw-bold">Heading 2</span>
</li>
<li>
<a class="list-item active" href="#"><span>Link list 1 </span></a>
</li>
<li>
<a class="list-item" href="#"><span>Link list 2 </span></a>
</li>
<li>
<a class="list-item" href="#"><span>Link list 3 </span></a>
</li>
</ul>
</div>
</div>
<div class="col-12 col-lg-4">
<div class="link-list-wrapper">
<ul class="link-list">
<li>
<span class="link-list-heading text-primary fw-bold">Heading 3</span>
</li>
<li>
<a class="list-item" href="#"><span>Link list 1 </span></a>
</li>
<li>
<a class="list-item disabled" href="#"><span>Link list 2 </span></a>
</li>
<li>
<a class="list-item" href="#"><span>Link list 3</span></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
</div>