Unito.it

Tema Unito v 3 / 3.1

Navigazione laterale

Navigazione laterale per sotto-sezioni

Navigazione laterale

ultimo aggiornamento 16/10/24

Il menù di navigazione di sezione viene utilizzato in colonna, nelle sezioni interne del sito, per veicolare la navigazione all'interno di sotto-sezioni dell'area corrente.

Questo tipo di menù fa uso del componente collapse ed è caratterizzato dalla classse .Sidenav presente all'interno del container principale.

La sezione attualmente attiva fa uso della classe .active

Versione 3.1

IN QUESTA SEZIONE

<div class="Sidenav">
        <h3 class="mb-0">IN QUESTA SEZIONE</h3>
        <div class="accordion accordionv3 p-3" id="collapsev3">
            <div class="accordion-item">
                <a href="#" title="Lorem Ipsum">
                    Organi della scuola
                </a>
            </div>
            <div class="accordion-item">
                <h2 class="accordion-header " id="heading_a">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc1" aria-expanded="false" aria-controls="acc1">
                        Regolamenti
                    </button>
                </h2>
                <div id="acc1" class="accordion-collapse collapsed collapse" role="region" aria-labelledby="heading_a">
                    <div class="accordion-body">
                        <div class="accordion accordionv3 p-3" id="collapsev3inner">
                            <div class="accordion-item">
                                <a href="#" title="Lorem Ipsum">
                                    Lorem Ipsum
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="accordion-item">
                <a href="#" class="active"  title="Lorem Ipsum">
                    Sedi didattiche
                </a>
            </div>
            <div class="accordion-item">
                <a href="#" title="Lorem Ipsum">
                    Servizi e contatti
                </a>
            </div>
        </div>
</div>
Solo Versione 3
IN QUESTA SEZIONE
<div class="intestazioneSide">IN QUESTA SEZIONE</div>
    <ul class="sidebarnav">
        <li class="nav-item"><a href="#" class="nav-link"><span>Link utili</span></a></li>
        <li class="nav-item active"><span class="active">Calendario didattico</span></li>
        <li class="nav-item"><a href="#" class="nav-link"><span>Appelli</span></a></li>
        <li class="nav-item"><a href="#" class="nav-link"><span>Servizi offerti agli studenti con disabilità</span></a></li>
    </ul>
    </div>

Contenuti aggiuntivi: testo libero

Solo Versione 3

Contenuti ulteriori possono essere aggiunti attraverso una card dedicata.

Contenuto principale
IN QUESTA SEZIONE
Lorem Ipsum
Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<div class="intestazioneSide">IN QUESTA SEZIONE</div>
<ul class="sidebarnav">
    <li class="nav-item"><a href="#" class="nav-link"><span>Link utili</span></a></li>  
    <li class="nav-item"><a href="#" class="nav-link"><span>Servizi offerti agli studenti con disabilità</span></a></li>
</ul>
<div class="sidenav mt-4">
    <div class="card">
        <div class="card-body">
            <div class="categoryicon-top">
            <svg class="icon negative">
              <use xlink:href="./dist/svg/sprite.svg#it-info-circle"></use>
            </svg>
            <span class="text">Lorem Ipsum</span>
        </div>
        <h5 class="card-title">Lorem ipsum dolor sit amet</h5>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </div>
</div>
Solo Versione 3

In questo caso, all'interno del corpo della card viene inserita una lista

Contenuto principale
IN QUESTA SEZIONE
Lorem Ipsum 
<div class="intestazioneSide">IN QUESTA SEZIONE</div>
<ul class="sidebarnav">
    <li class="nav-item"><a href="#" class="nav-link"><span>Link utili</span></a></li>  
    <li class="nav-item"><a href="#" class="nav-link"><span>Servizi offerti agli studenti con disabilità</span></a></li>
</ul>
<div class="sidenav mt-4">
    <div class="card">
        <div class="card-body">
            <div class="categoryicon-top">
                <svg class="icon negative">
                  <use xlink:href="./dist/svg/sprite.svg#it-info-circle"></use>
                </svg>
                <span class="text">Lorem Ipsum</span>
            </div>
            <div class="it-list-wrapper">   
              <ul class="it-list">
                <li>
                  <div class="list-item" href="#">
                    <div class="it-right-zone">
                      <a href="#" class="" data-focus-mouse="false">
                        <span class="text">Link<em>Lorem ipsum dolor sit amet.</em></span>
                      </a>
                      <span class="it-multiple">
                        <a href="#" aria-label="Link">
                          <svg class="icon">
                            <use href="./dist/svg/sprite.svg#it-external-link"></use>
                          </svg>
                        </a>
                      </span>
                    </div>
                  </div>
                </li>
                                <li>
                  <div class="list-item" href="#">
                    <div class="it-right-zone">
                      <a href="#" class="" data-focus-mouse="false">
                        <span class="text">Link<em>Lorem ipsum dolor sit amet.</em></span>
                      </a>
                      <span class="it-multiple">
                        <a href="#" aria-label="Link">
                          <svg class="icon">
                            <use href="./dist/svg/sprite.svg#it-external-link"></use>
                          </svg>
                        </a>
                      </span>
                    </div>
                  </div>
                </li>
                                <li>
                  <div class="list-item" href="#">
                    <div class="it-right-zone">
                      <a href="#" class="" data-focus-mouse="false">
                        <span class="text">Link<em>Lorem ipsum dolor sit amet.</em></span>
                      </a>
                      <span class="it-multiple">
                        <a href="#" aria-label="Link">
                          <svg class="icon">
                            <use href="./dist/svg/sprite.svg#it-external-link"></use>
                          </svg>
                        </a>
                      </span>
                    </div>
                  </div>
                </li>
              </ul>
           </div>
        </div>
    </div>
</div>
Torna su