Regione Toscana Design System — Servizi Design System Core

Breadcrumb component 

<nav class="rtds-breadcrumb" aria-label="Breadcrumb">
    <ol class="rtds-breadcrumb__list">

        <li class="rtds-breadcrumb__item">
            <a class="rtds-breadcrumb__link" href="#">
                Home

                <svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 rtds-ml-2" aria-hidden="true" focusable="false" role="img">
                    <use href="../../icons.svg#mini--chevron-right" />
                </svg>

            </a>
        </li>

        <li class="rtds-breadcrumb__item">
            <a class="rtds-breadcrumb__link" href="#">
                Livello 1

                <svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 rtds-ml-2" aria-hidden="true" focusable="false" role="img">
                    <use href="../../icons.svg#mini--chevron-right" />
                </svg>

            </a>
        </li>

        <li class="rtds-breadcrumb__item">
            <a class="rtds-breadcrumb__link" href="#">
                Livello 2

                <svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 rtds-ml-2" aria-hidden="true" focusable="false" role="img">
                    <use href="../../icons.svg#mini--chevron-right" />
                </svg>

            </a>
        </li>

        <li class="rtds-breadcrumb__item">
            <a class="rtds-breadcrumb__link" href="#" aria-current="page">
                Pagina corrente

            </a>
        </li>

    </ol>
</nav>
 
<nav class="rtds-breadcrumb{% if textColor %} {{ textColor }}{% endif %}{% block classes %}{% if classes %} {{ classes }}{% endif %}{% endblock classes %}" aria-label="Breadcrumb">
  <ol class="rtds-breadcrumb__list">
    {% for item in items %}
    <li class="rtds-breadcrumb__item">
        <a class="rtds-breadcrumb__link" href="#" {%- if loop.last -%} aria-current="page"{%- endif -%}>
          {% if loop.first %}
            {%- if hasIcon -%}
            {% render '@icon', {id:'home',size: 'rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5'}, true %}
              <span class="rtds-sr-only">
            {%- endif -%}
          {%- endif -%}
          {{ item.label }}
          {%- if loop.first -%}
            {%- if hasIcon -%}
              </span>
            {%- endif -%}
          {% endif %}
          {% if not loop.last %}
            {% render '@icon', {id:'mini--chevron-right',size: 'rtds-w-4 rtds-h-4', classes: 'rtds-ml-2'}, true %}
          {% endif %}
        </a>
    </li>
    {% endfor %}
  </ol>
</nav>
 
{
  "items": [
    {
      "label": "Home"
    },
    {
      "label": "Livello 1"
    },
    {
      "label": "Livello 2"
    },
    {
      "label": "Pagina corrente"
    }
  ]
}
  • Content: 
    /* Breadcrumb */
.rtds-breadcrumb__list {
    flex-wrap: wrap;
    display: flex;
}
.rtds-breadcrumb__link {
    padding: var(--spacing-1);
    font-size: var(--fontsize-text-xs);
    display: inline-flex;
    align-items: center;
}
@media (min-width: 768px) {
    .rtds-breadcrumb__link {
        font-size: var(--fontsize-text-sm);
    }
}
.rtds-breadcrumb__link:where(a):hover {
    text-decoration-line: underline;
}
:where(.rtds-breadcrumb__item:last-child) .rtds-breadcrumb__link {
    font-weight: 700;
}
  • URL: /components/raw/breadcrumb/breadcrumb.built.css
  • Filesystem Path: components/03-molecules/breadcrumb/breadcrumb.built.css
  • Size: 512 Bytes
  • Content: 
    /* Breadcrumb */
@layer components {
    .rtds-breadcrumb__list {
        @apply rtds-flex rtds-flex-wrap;
    }

    .rtds-breadcrumb__link {
        @apply rtds-inline-flex rtds-items-center rtds-p-1 rtds-text-xs md:rtds-text-sm;
    }

    .rtds-breadcrumb__link:where(a) {
        @apply hover:rtds-underline;
    }

    :where(.rtds-breadcrumb__item:last-child) .rtds-breadcrumb__link {
        @apply rtds-font-bold;
    }
}
  • URL: /components/raw/breadcrumb/breadcrumb.css
  • Filesystem Path: components/03-molecules/breadcrumb/breadcrumb.css
  • Size: 430 Bytes

Breadcrumb

Il componente Breadcrumb fornisce una navigazione gerarchica che mostra la posizione dell’utente all’interno di un sito web o di un’applicazione.

Comportamento

Il componente è sempre renderizzato come <nav aria-label="Breadcrumb"> contenente un <ol> con un <li> per ogni voce. Ogni voce è un <a>; l’ultima ha aria-current="page" e stile grassetto. Nella variante con icona home, il primo <a> contiene un’icona SVG con aria-hidden="true" e un <span class="rtds-sr-only"> con il testo dell’etichetta.

Varianti

Varianti di Stile

  • default: Breadcrumb standard senza icona home
  • with-icon: Include un’icona home nel primo elemento

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

  • classes (stringa, opzionale): Classi CSS aggiuntive per personalizzare l’aspetto del componente
  • hasIcon (booleano, opzionale): Se impostato a true, mostra un’icona home nel primo elemento del breadcrumb
  • items (array, obbligatorio): Lista degli elementi del breadcrumb
    • label (stringa, obbligatorio): Testo da visualizzare per ogni elemento

Accessibilità

WCAG 2.1

Livello AA — criteri pertinenti:

  • 1.3.1 Informazioni e correlazioni — la struttura è comunicata tramite <nav> e <ol>, semanticamente corretti per la navigazione gerarchica
  • 2.4.8 Posizione — il breadcrumb comunica la posizione dell’utente nella struttura del sito
  • 4.1.2 Nome, ruolo, valore — aria-label identifica la regione di navigazione; aria-current="page" identifica la pagina corrente

Struttura e semantica

  • Il componente è renderizzato come <nav aria-label="Breadcrumb"> — identifica la regione di navigazione e la distingue da altri elementi <nav> nella pagina
  • La lista è un <ol> (lista ordinata), coerente con la natura gerarchica del percorso di navigazione
  • Ogni elemento è un <li> con un <a> come link cliccabile
  • L’icona home (quando attivata) è accompagnata dal testo dell’elemento racchiuso in <span class="rtds-sr-only"> per garantire la leggibilità agli screen reader

Attributi ARIA

Attributo Valori Condizione
aria-label "Breadcrumb" sempre presente sul <nav>
aria-current "page" presente sull’<a> dell’ultimo elemento
Tasto Azione
Tab / Shift+Tab Sposta il focus tra i link del breadcrumb
Enter Attiva il link corrente

Gestione del focus

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

Screen reader

  • Lo screen reader annuncia la regione come “Breadcrumb” (navigazione)
  • L’ultimo elemento viene annunciato con il ruolo “pagina corrente” grazie ad aria-current="page"
  • L’icona home ha aria-hidden="true" — lo screen reader la ignora; il testo dell’etichetta è nel <span class="rtds-sr-only"> adiacente
  • Le icone chevron di separazione hanno aria-hidden="true" — lo screen reader le ignora

Stili CSS

Classi Base

  • .rtds-breadcrumb: Classe principale del componente

Classi Elementi (BEM)

  • .rtds-flex, .rtds-flex-wrap: Layout flexbox
  • .rtds-inline-flex, .rtds-items-center: Allineamento elementi
  • .rtds-p-1: Padding
  • .rtds-content-03: Stile del testo
  • .rtds-text-xs, md:rtds-text-sm: Dimensioni del testo responsive
  • .rtds-font-bold: Stile grassetto per l’ultimo elemento
  • .rtds-sr-only: Nasconde visivamente il testo mantenendolo accessibile

Esempi di utilizzo

<!-- Esempio base -->
<nav class="rtds-breadcrumb" aria-label="Breadcrumb">
  <ol class="rtds-flex rtds-flex-wrap">
    <li>
      <a class="rtds-inline-flex rtds-items-center rtds-p-1 rtds-content-03 rtds-text-xs md:rtds-text-sm" href="#">
        Home
      </a>
    </li>
    <li>
      <a class="rtds-inline-flex rtds-items-center rtds-p-1 rtds-content-03 rtds-text-xs md:rtds-text-sm" href="#">
        Eventi
      </a>
    </li>
    <li>
      <a class="rtds-inline-flex rtds-items-center rtds-p-1 rtds-content-03 rtds-text-xs md:rtds-text-sm rtds-font-bold" aria-current="page" href="#">
        Seminari
      </a>
    </li>
  </ol>
</nav>

<!-- Esempio con icona home -->
<nav class="rtds-breadcrumb" aria-label="Breadcrumb">
  <ol class="rtds-flex rtds-flex-wrap">
    <li>
      <a class="rtds-inline-flex rtds-items-center rtds-p-1 rtds-content-03 rtds-text-xs md:rtds-text-sm" href="#">
        <svg class="rtds-icon" aria-hidden="true" focusable="false"><use href="#solid--home"></use></svg>
        <span class="rtds-sr-only">Home</span>
      </a>
    </li>
    <li>
      <a class="rtds-inline-flex rtds-items-center rtds-p-1 rtds-content-03 rtds-text-xs md:rtds-text-sm rtds-font-bold" aria-current="page" href="#">
        Seminari
      </a>
    </li>
  </ol>
</nav>