Breadcrumb component: Default

Ready

HTML
View
Context
Assets
Info
Notes


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

File:

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

Handle: @breadcrumb--default
Variants (2): Default , With Icon
Preview:
- With layout
- Component only
Filesystem Path: components/03-molecules/breadcrumb/breadcrumb.njk
References (1): @icon
Referenced by (12): @page-header-base, @page-header-base--has-breadcrumb, @page-header-base--with-cta, @page-header-base--with-multiple-cta, @page-header-base--has-description, @page-header-base--has-bg, @page-header-base--has-title-context, @page-header-base--is-context-banner, @page-header-base-smart, @page-header-base-smart--nuova-istanza, @page-header-base-smart--no-notifiche, @page-header-base-smart--semplice

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

Navigazione da tastiera

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

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>