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à delle voci nella lista, che può scorrere per una visualizzazione completa.
Questo tipo di menu è sempre collocato a sinistra dello schermo; può essere utilizzato in modalità a scomparsa o sidebar.
Si vedano le voci menu verticale e sidebar nella pagina degli esempi per una migliore comprensione del possibile utilizzo.
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>Annidato
<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>