Regione Toscana Design System Design System Servizi

Secondary menu component 

<nav class="rtds-secondary-navigation" aria-label="Secondaria">
    <ul class="rtds-secondary-navigation__list rtds-gap-2">

        <li class="">
            <a href="" class="rtds-link rtds-p-2 rtds-text-xs xl:rtds-text-sm rtds-content-01">
                Item label 1

            </a>
        </li>

        <li class="">
            <a href="" class="rtds-link rtds-p-2 rtds-text-xs xl:rtds-text-sm rtds-content-01">
                Item label 3

            </a>
        </li>

        <li class="">
            <a href="" class="rtds-link rtds-p-2 rtds-text-xs xl:rtds-text-sm rtds-content-01">
                Item label 4

            </a>
        </li>

        <li class="">
            <a href="" class="rtds-link rtds-p-2 rtds-text-xs xl:rtds-text-sm rtds-content-01">
                Item label 5

            </a>
        </li>

    </ul>
</nav>
 
<nav class="rtds-secondary-navigation" aria-label="{{ label }}">
    <ul class="rtds-secondary-navigation__list{% if listGap %} {{ listGap }}{% else %} rtds-gap-2{% endif %}">
    {% for item in items %}
        <li class="{% if itemClasses %} {{ itemClasses }}{% endif %}{% if separator %} rtds-border-r rtds-border-gray-01 last:rtds-border-r-0 rtds-px-4 {% endif %}">
            {% render '@link', { label:item.label, classes:'rtds-p-2 rtds-text-xs xl:rtds-text-sm rtds-content-01' }, true %}
        </li>
    {% endfor %}
    </ul>
</nav>
 
{
  "label": "Secondaria",
  "items": [
    {
      "label": "Item label 1"
    },
    {
      "label": "Item label 3"
    },
    {
      "label": "Item label 4"
    },
    {
      "label": "Item label 5"
    }
  ]
}
  • Content: 
    /**
 * PRIMARY NAVIGATION
 *
*/
.rtds-secondary-navigation__list {
    display: grid;
}
@media (min-width: 1024px) {
    .rtds-secondary-navigation__list {
        display: flex;
    }
}
  • URL: /components/raw/secondary-navigation/secondary-navigation.built.css
  • Filesystem Path: components/03-molecules/secondary-navigation/secondary-navigation.built.css
  • Size: 187 Bytes

Secondary Navigation

Componente per la navigazione secondaria del sito. Include un menu di navigazione accessibile e personalizzabile.

Comportamento

Il componente è sempre renderizzato come <nav aria-label="[etichetta]"> contenente un <ul> con un <li> e un <a> per ogni voce. I separatori opzionali tra le voci sono elementi <li> con classe di stile dedicata, senza semantica propria.

Parametri di configurazione

Contesto di sviluppo Fractal/Nunjucks — Questa sezione riguarda esclusivamente i parametri del context .config.yml usati durante lo sviluppo nella libreria. Non descrive attributi HTML o proprietà da usare nei temi, CMS o ambienti di implementazione: per quello, fare riferimento alla sezione Esempi di utilizzo.

Parametri Base

  • label (stringa, obbligatorio): Testo dell’etichetta della navigazione (obbligatorio per l’accessibilità)
  • items (array, obbligatorio): Array di oggetti contenenti gli elementi della navigazione
    • label (stringa, obbligatorio): Testo dell’elemento della navigazione

Parametri di Stile e Layout

  • listGap (stringa, opzionale): Classi CSS per personalizzare lo spazio tra gli elementi della lista (default: rtds-gap-2)
  • itemClasses (stringa, opzionale): Classi CSS aggiuntive per gli elementi della lista
  • separator (booleano, opzionale): Se true, aggiunge separatori tra gli elementi della lista

Accessibilità

WCAG 2.1

Livello AA — criteri pertinenti:

  • 1.3.1 Informazioni e correlazioni — la struttura è comunicata tramite <nav> e <ul> semanticamente corretti
  • 2.4.6 Intestazioni ed etichette — aria-label identifica il ruolo della navigazione secondaria

Struttura e semantica

  • <nav> con aria-label descrittivo — landmark navigation; identifica la regione di navigazione secondaria e la distingue dalla navigazione principale
  • <ul> + <li> + <a> — struttura semantica di navigazione; ogni voce è un link nativo raggiungibile con Tab e attivabile con Enter

Attributi ARIA

Attributo Valori Condizione
aria-label testo descrittivo (parametro label) sempre presente sul <nav>
Tasto Azione
Tab / Shift+Tab Sposta il focus tra i link della navigazione secondaria
Enter Attiva il link corrente

Gestione del focus

  • Focus visibile: lo stile :focus-visible è sempre visibile e non viene rimosso via CSS

Screen reader

  • Il <nav aria-label="..."> è annunciato come landmark di navigazione con il nome dell’etichetta (es. “Utilità”, “Footer navigation”) — lo screen reader lo distingue da altri landmark navigation nella pagina
  • L’aria-label è obbligatorio: senza di esso, il landmark non avrebbe un nome significativo per le tecnologie assistive

Esempi di utilizzo

<!-- Esempio base -->
<nav class="rtds-secondary-navigation" aria-label="Utilità">
  <ul class="rtds-secondary-navigation__list rtds-gap-2">
    <li>
      <a class="rtds-p-2 rtds-text-xs xl:rtds-text-sm rtds-content-01" href="/privacy">Privacy</a>
    </li>
    <li>
      <a class="rtds-p-2 rtds-text-xs xl:rtds-text-sm rtds-content-01" href="/accessibilita">Accessibilità</a>
    </li>
  </ul>
</nav>

<!-- Esempio con separatori -->
<nav class="rtds-secondary-navigation" aria-label="Footer navigation">
  <ul class="rtds-secondary-navigation__list rtds-gap-2">
    <li class="rtds-separator">
      <a class="rtds-p-2 rtds-text-xs xl:rtds-text-sm rtds-content-01" href="/note-legali">Note legali</a>
    </li>
    <li class="rtds-separator">
      <a class="rtds-p-2 rtds-text-xs xl:rtds-text-sm rtds-content-01" href="/cookie">Cookie policy</a>
    </li>
  </ul>
</nav>