Regione Toscana Design System

Breadcrumb component: With Icon 

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

        <li class="rtds-breadcrumb__item">
            <a class="rtds-breadcrumb__link" href="#">
                <svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5" aria-hidden="true" focusable="false" role="img">
                    <use href="../../icons.svg#home" />
                </svg>

                <span class="rtds-sr-only">Home</span>

                <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"
    }
  ],
  "hasIcon": true
}
  • 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 Component

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

Markup

Il componente genera una struttura di navigazione accessibile con il seguente markup:

<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="#">
        <!-- Contenuto del link -->
      </a>
    </li>
  </ol>
</nav>

Configurazione

Parametri disponibili

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

Esempio di configurazione

context:
  classes: "custom-class"
  hasIcon: true
  items:
    - label: Home
    - label: Eventi
    - label: Seminari
    - label: Lavoro e transizione energetica

Varianti

Il componente supporta due varianti:

  1. Default: Breadcrumb standard senza icona home
  2. With Icon: Include un’icona home nel primo elemento

Comportamento

  • L’ultimo elemento viene evidenziato in grassetto
  • Tra gli elementi viene inserita un’icona chevron
  • Il componente è responsive con dimensioni del testo diverse su mobile e desktop
  • L’ultimo elemento ha l’attributo aria-current="page" per l’accessibilità
  • L’icona home (quando attivata) è accompagnata da testo nascosto per screen reader

Classi CSS utilizzate

  • rtds-breadcrumb: Classe principale del componente
  • 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