Skip to main content
logo regione lombardia

Bootstrap Regione Lombardia

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

Codice Menù verticale

Codice Menù verticale

Struttura della pagina

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

<main>
  <div class="container-fluid">
      <div class="col-12">
      {% include esempi-lombardia/filtri_tabella.html %}
      {% include esempi-lombardia/tabella.html %}
      {% include esempi-lombardia/paginazione.html %}
      </div>
    </div>
  </div>
</main>

{% include html_docs/footer/footer_minimo.html %}

Nel tag <header> sono inclusi:

  • la barra istituzionale (composta da topbar_base e header_menu-vert)
  • l’intero corpo del menu verticale
    a sua volta incluso nel <div id="it25-menu-vert">
    indispensabile per il funzionamento del meccanismo di comparsa/scomparsa.

Nel tag <main> l’uso di:

  • <div class="container-fluid">
  • <div class="col-12">

permette di utilizzare tutta la larghezza dello schermo.

header_menu-vert

 <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">
            <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-primary">
                  <use xlink:href="/bootstrap-lombardia/dist/svg/sprites.svg#it-burger"></use>
                </svg>
              </button>
            </div>
            <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>

Il <button> con id="btn-hamburger" è sempre visibile, indipendentemente dalla dimensione dello schermo.

Fondamentali per il funzionamento sono:

  • data-bs-toggle="collapse"
    che determina l’apertura dall’alto verso il basso del menù
  • data-bs-target="#it25-main-nav"
    che collega il bottone al tag contenente il corpo del menù.

attivazione

Per attivare il funzionamento del menu verticale, è necessario invocare la funzione:

bootstrap.it25Header()

Il menù deve essere inserito in un tag con queste caratteristiche:
<nav class="collapse it25-vertical-menu" id="it25-main-nav">

  <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>