Regione Toscana Design System

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"
    }
  ]
}

Componente Secondary Navigation

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

Comportamento e Funzionalità

Il componente Secondary Navigation è progettato per gestire menu di navigazione secondari con supporto completo per l’accessibilità. Include:

  • Gestione delle etichette per la navigazione
  • Supporto per separatori tra gli elementi
  • Personalizzazione degli spazi tra gli elementi
  • Classi personalizzabili per gli elementi della lista
  • Supporto per layout responsive

Accessibilità

Il componente è stato progettato seguendo le best practice di accessibilità WCAG 2.1:

Etichette

  • La navigazione è sempre associata a un’etichetta (aria-label) che descrive il suo scopo
  • Gli elementi della lista sono strutturati semanticamente con <nav> e <ul>

Struttura

  • La navigazione è implementata come lista non ordinata (<ul>) per una corretta struttura semantica
  • Gli elementi della lista sono collegati tramite link accessibili

Markup e Struttura

Il componente è strutturato come segue:

<nav class="rtds-secondary-navigation" aria-label="[label]">
    <ul class="rtds-secondary-navigation__list [listGap]">
        <li class="[itemClasses] [separator]">
            <a class="rtds-p-2 rtds-text-xs xl:rtds-text-sm rtds-content-01">[item.label]</a>
        </li>
    </ul>
</nav>

Configurazioni per lo Sviluppo in Nunjucks

Parametri Disponibili

Etichetta e Identificazione

  • label: Testo dell’etichetta della navigazione (obbligatorio per l’accessibilità)

Stile e Layout

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

Elementi della Lista

  • items: Array di oggetti contenenti gli elementi della navigazione
    • label: Testo dell’elemento della navigazione

Varianti

Il componente include diverse possibilità di personalizzazione:

  1. Default: Navigazione base con spaziatura standard
  2. Con Separatori: Navigazione con separatori tra gli elementi
  3. Spaziatura Personalizzata: Navigazione con spaziatura personalizzata tra gli elementi
  4. Elementi Personalizzati: Navigazione con classi personalizzate per gli elementi

Ogni variante può essere utilizzata come base per personalizzazioni specifiche, mantenendo la coerenza con il design system.