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 Sidebar

Codice Sidebar

Struttura della pagina

<header class="it-header-wrapper it-header-sticky"
  data-bs-position-type="fixed"
  data-bs-toggle="sticky"
  data-bs-target="#header-nav-wrapper"
  data-bs-sticky-class-name="is-sticky">
   {% include html_docs/header/topbar.html %}
   {% include html_docs/header/center_sidebar.html %}
</header>

<main>
  <div class="container-fluid">
    <div class="row flex-xl-nowrap">
      <div class="col-12 col-md-3 col-xl-2 it25-sidebar">
      {% include html_docs/menu-verticale/menu-verticale-annidato.html %}
      </div>
      <div class="col-12 col-md-9">
        <h1>Nome form</h1>
        <form class="my-5 px-5" id="justValidate" action="index.html" method="post">
          {% include esempi-lombardia/account_posta.html %}
          {% include esempi-lombardia/indirizzo.html %}
          {% include esempi-lombardia/datepickers.html %}
          {% include esempi-lombardia/radiobuttons.html %}
          {% include esempi-lombardia/checkboxes.html %}
          {% include esempi-lombardia/toggles.html %}
    <!-- *****************************************************************************************************+ -->
          <div class="row">
            <div class="col-12">
              <div class="float-end">
                <button type="button" class="btn btn-outline-primary">Annulla</button>
                <button type="submit" class="btn btn-primary">Invio</button>
              </div>
            </div>
          </div>
    <!-- *****************************************************************************************************+ -->
        </form>
        <div class="container">
          <div class="row">
            <div class="col-12">
              <div aria-live="polite" id="errorMsgContainer"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div> <!-- end container -->
</main>
{% include html_docs/footer/footer.html %}

Il tag <header> contiene solo la barra istituzionale composta da:

  • topbar
  • header_sidebar
    descritta più sotto.

Nel tag <main>, all’interno del <div class="container-fluid">, è presente:

  • <div class="row flex-xl-nowrap">
    una riga contenitore che mantiene affiancate sidebar e parte destra del main.
    Questa a sua volta contiene:
    • <div class="col-12 col-md-3 col-xl-2 it25-sidebar">
      { include ... menu-verticale-annidato.html }
      </div>
      la parte sinistra con la sidebar che occupa 3 colonne su schermi medi e grandi e solo 2 sugli xl.
      Il corpo del menu è inserito direttamente nel div, cui però va aggiunta la classe: it25-sidebar
    • <div class="col-12 col-md-9">
      la parte destra contenente il form

header_sidebar

      <div class="it-header-center-wrapper it25-header-sidebar" id="header-nav-wrapper">
      <div class="container-fluid">
        <div class="row">
          <div class="col-12">
            <div class="it-header-center-content-wrapper d-flex justify-content-between">

              <div class="it25-left-zone  d-flex justify-content-start">
                <div class="it25-hamburger-btn-wrapper">
                  <button
                    id="btn-hamburger"
                    class="custom-navbar-toggler btn btn-xs d-md-none"
                    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" role="presentation">
                      <use xlink:href="/bootstrap-lombardia/dist/svg/sprites.svg#it-burger"></use>
                    </svg>
                  </button>
                </div>

                <div class="it-brand-wrapper d-flex justify-content-start">
                  
                  <div class="it-brand-text">
                    <div class="it-brand-title d-inline">
                    
                    <span class="it25-app-name d-none d-md-inline">Nome applicativo</span>
                    </div>
                  </div>
                </div>
              </div>

              <div class="it-right-zone">
                <div class="it-search-wrapper">
                  <span class="d-none d-md-block">Cerca</span>
                  <a class="search-link rounded-icon" aria-label="Cerca nel sito" href="#">
                    <svg class="icon icon-sm"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-search"></use></svg>
                  </a>
                </div>
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>

Il <button> con id="btn-hamburger" deve essere visibile solo sugli schermi di dimensione piccola,
quindi è necessario specificare, nell’attributo class: d-md-none
che determina il display: no per gli schermi di dimensione da media in su.

Non è presente il bottone di chiusura che compare automaticamente in alto a destra nel menù che si sovrappone allo schermo.

Fondamentali per il funzionamento sono:

  • data-bs-toggle="collapse"
    che apre il menù da sinistra verso destra coprendo l’intero schermo
  • data-bs-target="#it25-main-nav"
    che collega il bottone al tag contenente il corpo del menù.

Il menù, a differenza che nel caso del menù verticale, può essere inserito direttamente nel div della parte sinistra, con l’aggiunta della sola classe: 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" role="presentation"><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" autocomplete="off">
    </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" role="presentation"><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" role="presentation"><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" role="presentation"><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" role="presentation"><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" role="presentation"><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" role="presentation"><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>