Unito.it

Tema Unito v3

Menù di sezione

Navigazione laterale per sotto-sezioni

Navigazione laterale

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.

In cima all'elenco è presente un div, opzionale, con classe .intestazioneSide con funziona di titol oper la sezione.
La sezione attualmente attiva fa uso della classe .active associata al tag li ed al tag interno span, e non prevede la presenza del link ipertestuale a.


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

Contenuti aggiuntivi: testo libero

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>

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