Menu Verticale
Menù principale di navigazione
Il Menu verticale può incorporare liste semplici e liste innestate.
Si utilizza quando si ha l’esigenza di trattare in forma di lista le voci del menu, quindi all’interno di applicativi con molte sezioni cui si deve dare accesso in qualsiasi punto della navigazione.
Lo si preferisce per garantire la leggibilità degli item nella lista, che potrà essere scrollata per una visualizzazione completa.
Questo tipo di menu è sempre collocato a sinistra dello schermo per facilitare una lettura consequenziale delle informazioni.
Semplice
<div class="col-md-4 it25-sidebar">
<nav class="collapse it25-vertical-menu" id="it25-main-nav_remove-me">
<div class="sidebar-wrapper">
<div class="sidebar-linklist-wrapper">
<div class="link-list-wrapper">
<ul class="link-list">
<li>
<a class="list-item medium" href="#"><span>Lorem ipsum dolor</span></a>
</li>
<li>
<a class="list-item medium active" href="#"><span>Link attivo</span></a>
</li>
<li>
<a class="list-item medium" href="#"><span>Lorem ipsum dolor</span></a>
</li>
<li>
<a class="list-item medium disabled" href="#"><span>Disabilitato</span></a>
</li>
<li>
<a class="list-item medium" href="#"><span>Lorem ipsum dolor</span></a>
</li>
<li>
<a class="list-item medium" href="#"><span>Lorem ipsum dolor</span></a>
</li>
<li>
<a class="list-item medium" href="#"><span>Lorem ipsum dolor</span></a>
</li>
<li>
<a class="list-item medium" href="#"><span>Lorem ipsum dolor</span></a>
</li>
<li>
<a class="list-item medium" href="#"><span>Lorem ipsum dolor</span></a>
</li>
<li>
<a class="list-item medium" href="#"><span>Lorem ipsum dolor</span></a>
</li>
<li>
<a class="list-item medium" href="#"><span>Lorem ipsum dolor</span></a>
</li>
<li>
<a class="list-item medium" href="#"><span>Lorem ipsum dolor</span></a>
</li>
<li>
<a class="list-item medium" href="#"><span>Lorem ipsum dolor</span></a>
</li>
<li>
<a class="list-item medium" href="#"><span>Lorem ipsum dolor</span></a>
</li>
<li>
<a class="list-item medium" href="#"><span>Lorem ipsum dolor</span></a>
</li>
<li>
<a class="list-item medium" href="#"><span>Lorem ipsum dolor</span></a>
</li>
<li>
<a class="list-item medium" href="#"><span>Lorem ipsum dolor</span></a>
</li>
<li>
<a class="list-item medium" href="#"><span>Lorem ipsum dolor</span></a>
</li>
<li>
<a class="list-item medium" href="#"><span>Lorem ipsum dolor</span></a>
</li>
<li>
<a class="list-item medium" href="#"><span>Lorem ipsum dolor</span></a>
</li>
<li>
<a class="list-item medium" href="#"><span>Lorem ipsum dolor</span></a>
</li>
<li>
<a class="list-item medium" href="#"><span>Lorem ipsum dolor</span></a>
</li>
<li>
<a class="list-item medium" href="#"><span>Lorem ipsum dolor</span></a>
</li>
<li>
<a class="list-item medium" href="#"><span>Lorem ipsum dolor</span></a>
</li>
<li>
<a class="list-item medium" href="#"><span>Lorem ipsum dolor</span></a>
</li>
<li>
<a class="list-item medium" href="#"><span>Lorem ipsum dolor</span></a>
</li>
<li>
<a class="list-item medium" href="#"><span>Lorem ipsum dolor</span></a>
</li>
<li>
<a class="list-item medium" href="#"><span>Lorem ipsum dolor</span></a>
</li>
</ul>
</div>
</div>
</div>
</nav>
</div>Innestata
<div class="col-md-4 it25-sidebar">
<nav class="collapse it25-vertical-menu" id="it25-main-nav">
<div class="form-group">
<div class="input-group">
<span class="input-group-text">
<svg class="icon icon-sm"><use xlink:href="/bootstrap-lombardia/dist/svg/sprites.svg#it-search"></use></svg>
</span>
<label for="searchField">Cerca</label>
<input type="text" class="form-control" id="searchField">
</div>
</div>
<div class="sidebar-wrapper">
<div class="sidebar-linklist-wrapper">
<div class="link-list-wrapper">
<ul class="link-list">
<li>
<a class="list-item large medium right-icon" href="#collapseZero" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="collapseZero">
<span class="list-item-title-icon-wrapper">
<span class="fw-bold">Lorem ipsum dolor</span>
<svg class="icon icon-sm icon-primary right" aria-hidden="true"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-expand"></use></svg>
</span>
</a>
<ul class="link-sublist collapse" id="collapseZero">
<li>
<a class="list-item" href="#"><span>Lorem ipsum dolor</span></a>
</li>
<li>
<a class="list-item" href="#"><span>Lorem ipsum dolor</span></a>
</li>
<li>
<a class="list-item" href="#"><span>Lorem ipsum dolor</span></a>
</li>
</ul>
</li>
<li>
<a class="list-item large medium right-icon" href="#collapseUno" role="button" data-bs-toggle="collapse" aria-expanded="true" aria-controls="collapseUno">
<span class="list-item-title-icon-wrapper">
<span class="fw-bold">Lorem ipsum dolor</span>
<svg class="icon icon-sm icon-primary right" aria-hidden="true"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-expand"></use></svg>
</span>
</a>
<ul class="link-sublist collapse show" id="collapseUno">
<li>
<a class="list-item" href="#"><span>Lorem ipsum dolor</span></a>
</li>
<li>
<a class="list-item" href="#"><span>Lorem ipsum dolor</span></a>
</li>
<li>
<a class="list-item" href="#"><span>Lorem ipsum dolor</span></a>
</li>
</ul>
</li>
<li>
<a class="list-item large medium right-icon active" href="#collapseDue" role="button" data-bs-toggle="collapse" aria-expanded="true" aria-controls="collapseDue">
<span class="list-item-title-icon-wrapper">
<span class="fw-bold">Lorem ipsum dolor</span>
<svg class="icon icon-sm icon-primary right" aria-hidden="true"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-expand"></use></svg>
</span>
</a>
<ul class="link-sublist collapse show" id="collapseDue">
<li>
<a class="list-item" href="#"><span>Lorem ipsum dolor</span></a>
</li>
<li>
<a class="list-item" href="#"><span>Lorem ipsum dolor</span></a>
</li>
<li>
<a class="list-item" href="#"><span>Lorem ipsum dolor</span></a>
</li>
</ul>
</li>
<li>
<a class="list-item large medium right-icon" href="#collapseTre" role="button" data-bs-toggle="collapse" aria-expanded="true" aria-controls="collapseTre">
<span class="list-item-title-icon-wrapper">
<span class="fw-bold">Lorem ipsum dolor</span>
<svg class="icon icon-sm icon-primary right" aria-hidden="true"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-expand"></use></svg>
</span>
</a>
<ul class="link-sublist collapse show" id="collapseTre">
<li>
<a class="list-item" href="#"><span>Lorem ipsum dolor</span></a>
</li>
<li>
<a class="list-item" href="#"><span>Lorem ipsum dolor</span></a>
</li>
<li>
<a class="list-item" href="#"><span>Lorem ipsum dolor</span></a>
</li>
</ul>
</li>
<li>
<a class="list-item large medium right-icon" href="#collapseQuattro" role="button" data-bs-toggle="collapse" aria-expanded="true" aria-controls="collapseQuattro">
<span class="list-item-title-icon-wrapper">
<span class="fw-bold">Lorem ipsum dolor</span>
<svg class="icon icon-sm icon-primary right" aria-hidden="true"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-expand"></use></svg>
</span>
</a>
<ul class="link-sublist collapse show" id="collapseQuattro">
<li>
<a class="list-item" href="#"><span>Lorem ipsum dolor</span></a>
</li>
<li>
<a class="list-item" href="#"><span>Lorem ipsum dolor</span></a>
</li>
<li>
<a class="list-item" href="#"><span>Lorem ipsum dolor</span></a>
</li>
</ul>
</li>
<li>
<a class="list-item large medium right-icon" href="#collapseCinque" role="button" data-bs-toggle="collapse" aria-expanded="true" aria-controls="collapseCinque">
<span class="list-item-title-icon-wrapper">
<span class="fw-bold">Lorem ipsum dolor</span>
<svg class="icon icon-sm icon-primary right" aria-hidden="true"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-expand"></use></svg>
</span>
</a>
<ul class="link-sublist collapse show" id="collapseCinque">
<li>
<a class="list-item" href="#"><span>Lorem ipsum dolor</span></a>
</li>
<li>
<a class="list-item" href="#"><span>Lorem ipsum dolor</span></a>
</li>
<li>
<a class="list-item" href="#"><span>Lorem ipsum dolor</span></a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
</div>