Vai al contenuto principale

Bootstrap Italia

Il tema Bootstrap 5 per lo sviluppo di applicazioni web per la PA
Cerca nella documentazione

Breadcrumbs

Breadcrumbs

Indica la posizione della pagina corrente all’interno di una gerarchia di navigazione.

Le breadcrumbs (in italiano: briciole di pane) mostrano la pagina corrente e danno la possibilità di risalire nella gerarchia delle pagine attraverso dei comodi link ai livelli superiori.

Nelle breadcrumbs c’è la possibilità di scegliere il carattere da usare come separatore inserendolo all’interno del tag <span class="separator">.

Accessibilità

Dato che le breadcrumb sono uno strumento di navigazione del sito, è buona idea aggiungere un’etichetta significativa come aria-label="Percorso di navigazione" per descrivere il tipo di navigazione fornito nell’elemento <nav>, nonché applicare aria-current="page" all’ultimo elemento del set per indicare che rappresenta la pagina corrente. Per ottimizzare l’esperienza con gli screen reader, è consigliabile applicare aria-hidden="true" ai separatori delle breadcrumb, in quanto sono elementi visivi che non aggiungono informazioni utili alla navigazione.

Per maggiori informazioni, guarda le linee guida WAI-ARIA per la creazione di breadcrumb.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<nav class="breadcrumb-container" aria-label="Percorso di navigazione">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a><span class="separator" aria-hidden="true">/</span></li>
    <li class="breadcrumb-item"><a href="#">Sottosezione</a><span class="separator" aria-hidden="true">/</span></li>
    <li class="breadcrumb-item active" aria-current="page">Nome pagina</li>
  </ol>
</nav>

 <nav class="breadcrumb-container" aria-label="Percorso di navigazione">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a><span class="separator" aria-hidden="true">&gt;</span></li>
    <li class="breadcrumb-item"><a href="#">Sottosezione</a><span class="separator" aria-hidden="true">&gt;</span></li>
    <li class="breadcrumb-item active" aria-current="page">Nome pagina</li>
  </ol>
</nav>

Con icona

Per aggiungere un icona all’elemento breadcrumb è sufficiente inserire l’SVG corrispondente prima del tag <a> con la classe dell’icona che si intende visualizzare.

1
2
3
4
5
6
7

<nav class="breadcrumb-container" aria-label="Percorso di navigazione">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><svg class="icon icon-sm icon-secondary align-top me-1" aria-hidden="true"><use href="/dist/svg/sprites.svg#it-link"></use></svg><a href="#">Home</a><span class="separator" aria-hidden="true">/</span></li>
    <li class="breadcrumb-item"><svg class="icon icon-sm icon-secondary align-top me-1" aria-hidden="true"><use href="/dist/svg/sprites.svg#it-link"></use></svg><a href="#">Sottosezione</a><span class="separator" aria-hidden="true">/</span></li>
    <li class="breadcrumb-item active" aria-current="page"><svg class="icon icon-sm icon-secondary align-top me-1" aria-hidden="true"><use href="/dist/svg/sprites.svg#it-link"></use></svg>Nome pagina</li>
  </ol>
</nav>

Su sfondo scuro

Per la versione su sfondo scuro delle breadcrumbs è sufficiente aggiungere al tag <ol class="breadcrumb"> la classe .dark. Il colore del testo e del separatore cambieranno automaticamente in base al tema scuro, mentre il colore delle icone dovrà essere impostato manualmente con la classe .icon-inverse per renderle visibili su sfondo scuro.

Quando la versione su sfondo scuro viene utilizzata su un fondo di colore differente aggiungere la classe di spaziatura px-3 al <ol class="breadcrumb dark"> per creare un padding laterale.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<nav class="breadcrumb-container" aria-label="Percorso di navigazione">
  <ol class="breadcrumb dark px-3">
    <li class="breadcrumb-item"><a href="#">Home</a><span class="separator" aria-hidden="true">/</span></li>
    <li class="breadcrumb-item"><a href="#">Sottosezione</a><span class="separator" aria-hidden="true">/</span></li>
    <li class="breadcrumb-item active" aria-current="page">Nome pagina</li>
  </ol>
</nav>

<hr>
<nav class="breadcrumb-container" aria-label="Percorso di navigazione">
  <ol class="breadcrumb dark px-3">
    <li class="breadcrumb-item"><svg class="icon icon-sm icon-inverse align-top me-1" aria-hidden="true"><use href="/dist/svg/sprites.svg#it-link"></use></svg><a href="#">Home</a><span class="separator" aria-hidden="true">/</span></li>
    <li class="breadcrumb-item"><svg class="icon icon-sm icon-inverse align-top me-1" aria-hidden="true"><use href="/dist/svg/sprites.svg#it-link"></use></svg><a href="#">Sottosezione</a><span class="separator" aria-hidden="true">/</span></li>
    <li class="breadcrumb-item active" aria-current="page">Nome pagina</li>
  </ol>
</nav>

Properties

Variabile CSS Descrizione (Inglese) Predefinito
--bsi-breadcrumb-background Controls the background for the breadcrumb. transparent
--bsi-breadcrumb-border-radius Controls the border radius for the breadcrumb. 0
--bsi-breadcrumb-divider Controls the divider character for the breadcrumb. '/'
--bsi-breadcrumb-divider-color Controls the divider color for the breadcrumb, using color tokens. var(--bsi-color-border-secondary)
--bsi-breadcrumb-divider-flipped Controls the flipped divider for the breadcrumb. var(--bsi-breadcrumb-divider)
--bsi-breadcrumb-font-size Controls the font size for the breadcrumb, using font tokens. var(--bsi-label-font-size)
--bsi-breadcrumb-item-padding-x Controls the horizontal padding for breadcrumb items, using spacing tokens. var(--bsi-spacing-xs)
--bsi-breadcrumb-link-color Controls the link color for the breadcrumb, using color tokens. var(--bsi-color-text-secondary)
--bsi-breadcrumb-link-font-weight Controls the link font weight for the breadcrumb, using font tokens. var(--bsi-font-weight-solid)
--bsi-breadcrumb-margin Controls the margin for the breadcrumb, using spacing tokens. var(--bsi-spacing-s)
--bsi-breadcrumb-padding Controls the padding for the breadcrumb, using spacing tokens. var(--bsi-spacing-3xs)
--bsi-breadcrumb-separator-color Controls the separator color for the breadcrumb, using color tokens. var(--bsi-color-background-secondary)
--bsi-breadcrumb-separator-spacing Controls the separator spacing for the breadcrumb, using spacing tokens. var(--bsi-spacing-xxs)

Breaking change

  • Per la versione su sfondo scuro il colore delle icone dovrà essere impostato manualmente con la classe .icon-inverse per renderle visibili su sfondo scuro.