Unito.it

Tema Unito v 3 / 3.1

Menù di sezione

Navigazione per la pagine interne di una stessa sezione

Gli esempi di codice sono specifici per la Versione 3.1 del tema

Esempio

ultimo aggiornamento 16/10/24

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

Il componente è caratterizzato dalla classe .nav-sezione associata al container principale.
La sezione attualmente attiva fa uso della classe .active associata al tag div che contiene la sua label.

ATENEO
Chi siamo
Salute e sicurezza
Concorsi e selezioni
Organizzazione
Bandi di gata e contratti
UniTo e sanità
Strutture e sedi
Mission politiche e strategiche
Assicurazione delle qualità
Bilanci e assegnazioni delle risorse
Statuti e regolamenti
Welfare UniTo
<div class="row nav-sezione pt-2 pb-2">
    <div class="col-12 col-md-2 d-flex align-items-center justify-content-center">
        <div class="pl-2 pr-2 pr-md-2 pl-md-2 ps-lg-4 pe-lg-4 pb-1 sezione">ATENEO</div>
    </div>
    <div class="pt-2 pt-lg-0 col-12 col-md-10 col-lg-10 d-flex justify-content-start flex-wrap">
        <div class="col-12 col-md-4 col-lg-2 d-flex flex-column">
            <div class="p-2"><a href="#" title="Lorem Ipsum">Chi siamo</a></div>
            <div class="p-2"><a href="#" title="Lorem Ipsum">Salute e sicurezza</a></div>
        </div>
    <div class="col-12 col-md-4 col-lg-2 d-flex flex-column">
        <div class="p-2"><a href="#" title="Lorem Ipsum">Concorsi e selezioni</a></div>
            <div class="p-2"><a href="#" title="Lorem Ipsum">Organizzazione</a></div>
    </div>
    <div class="col-12 col-md-4 col-lg-2 d-flex flex-column">
        <div class="p-2"><a href="#" title="Lorem Ipsum">Bandi di gata e contratti</a></div>
        <div class="p-2"><a href="#" title="Lorem Ipsum">UniTo e sanità</a></div>
    </div>
    <div class="col-12 col-md-4 col-lg-2 d-flex flex-column">
        <div class="p-2"><a href="#" title="Lorem Ipsum">Strutture e sedi</a></div>
        <div class="p-2"><a href="#" title="Lorem Ipsum">Mission politiche e strategiche</a></div>
    </div>
    <div class="col-12 col-md-4 col-lg-2 d-flex flex-column">
        <div class="p-2"><a href="#" title="Lorem Ipsum">Assicurazione delle qualità</a></div>
        <div class="active p-2">Bilanci e assegnazioni delle risorse</div>
    </div>
    <div class="col-12 col-md-4 col-lg-2 d-flex flex-column">
        <div class="p-2"><a href="#" title="Lorem Ipsum">Statuti e regolamenti</a></div>
        <div class="p-2"><a href="#" title="Lorem Ipsum">Welfare UniTo</a></div>
    </div>
    </div>
</div>
Torna su