Componente
Breadcrumbs
Percorso di navigazione: daisyUI breadcrumbs su un elenco ordinato, con il separatore «/» di .italia o la freccia di daisyUI.
- Riferimento
<it-breadcrumbs>- Classi
ita-breadcrumbsita-breadcrumbs-chevronita-breadcrumbs-neutral- Basato su (daisyUI)
breadcrumbs0- Storybook
- Apri le storie di Breadcrumbs
Base
Mostra il codice HTMLNascondi il codice HTML
<nav class="ita-breadcrumbs" aria-label="Percorso di navigazione">
<ol>
<li><a href="#">Home</a></li>
<li><a href="#">Sezione</a></li>
<li><span aria-current="page">Voce corrente</span></li>
</ol>
</nav>Con icona
Mostra il codice HTMLNascondi il codice HTML
<nav class="ita-breadcrumbs" aria-label="Percorso di navigazione">
<ol>
<li><a href="#"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M13.4,13.4l-0.7-0.7c0.6-0.5,0.9-1.3,0.9-2.1c0-0.8-0.3-1.6-0.9-2.1L9.2,4.9C8,3.8,6.1,3.8,4.9,4.9C3.8,6.1,3.8,8,4.9,9.2 L7.8,12l-0.7,0.7L4.2,9.9c-1.5-1.6-1.5-4.1,0-5.7c1.6-1.5,4.1-1.5,5.7,0l3.5,3.6c0.8,0.7,1.2,1.7,1.2,2.8 C14.6,11.7,14.2,12.7,13.4,13.4z M19.8,19.8c1.5-1.6,1.5-4.1,0-5.7l-2.9-2.8L16.2,12l2.9,2.8c1.1,1.2,1.1,3.1,0,4.3 c-1.2,1.1-3.1,1.1-4.3,0l-3.5-3.6c-0.6-0.5-0.9-1.3-0.9-2.1c0-0.8,0.3-1.6,0.9-2.1l-0.7-0.7c-0.8,0.7-1.2,1.7-1.2,2.8 c0,1.1,0.4,2.1,1.2,2.8l3.5,3.6c0.7,0.7,1.8,1.1,2.8,1.1C18,21,19,20.6,19.8,19.8z" /></svg>Home</a></li>
<li><a href="#"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M13.4,13.4l-0.7-0.7c0.6-0.5,0.9-1.3,0.9-2.1c0-0.8-0.3-1.6-0.9-2.1L9.2,4.9C8,3.8,6.1,3.8,4.9,4.9C3.8,6.1,3.8,8,4.9,9.2 L7.8,12l-0.7,0.7L4.2,9.9c-1.5-1.6-1.5-4.1,0-5.7c1.6-1.5,4.1-1.5,5.7,0l3.5,3.6c0.8,0.7,1.2,1.7,1.2,2.8 C14.6,11.7,14.2,12.7,13.4,13.4z M19.8,19.8c1.5-1.6,1.5-4.1,0-5.7l-2.9-2.8L16.2,12l2.9,2.8c1.1,1.2,1.1,3.1,0,4.3 c-1.2,1.1-3.1,1.1-4.3,0l-3.5-3.6c-0.6-0.5-0.9-1.3-0.9-2.1c0-0.8,0.3-1.6,0.9-2.1l-0.7-0.7c-0.8,0.7-1.2,1.7-1.2,2.8 c0,1.1,0.4,2.1,1.2,2.8l3.5,3.6c0.7,0.7,1.8,1.1,2.8,1.1C18,21,19,20.6,19.8,19.8z" /></svg>Sezione</a></li>
<li><span aria-current="page">Voce corrente</span></li>
</ol>
</nav>Separatore personalizzato
Con ita-breadcrumbs-chevron resta la freccia di daisyUI.
Mostra il codice HTMLNascondi il codice HTML
<nav class="ita-breadcrumbs ita-breadcrumbs-chevron" aria-label="Percorso di navigazione">
<ol>
<li><a href="#">Home</a></li>
<li><a href="#">Sezione</a></li>
<li><span aria-current="page">Voce corrente</span></li>
</ol>
</nav>Su sfondo neutral
surface: "neutral" è la variante scura di Dev Kit Italia; il colore reale lo decide il tema.
Mostra il codice HTMLNascondi il codice HTML
<div class="flex flex-col gap-4">
<nav class="ita-breadcrumbs ita-breadcrumbs-neutral" aria-label="Percorso di navigazione">
<ol>
<li><a href="#">Home</a></li>
<li><a href="#">Sezione</a></li>
<li><span aria-current="page">Voce corrente</span></li>
</ol>
</nav>
<nav class="ita-breadcrumbs ita-breadcrumbs-chevron ita-breadcrumbs-neutral" aria-label="Percorso di navigazione">
<ol>
<li><a href="#"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M13.4,13.4l-0.7-0.7c0.6-0.5,0.9-1.3,0.9-2.1c0-0.8-0.3-1.6-0.9-2.1L9.2,4.9C8,3.8,6.1,3.8,4.9,4.9C3.8,6.1,3.8,8,4.9,9.2 L7.8,12l-0.7,0.7L4.2,9.9c-1.5-1.6-1.5-4.1,0-5.7c1.6-1.5,4.1-1.5,5.7,0l3.5,3.6c0.8,0.7,1.2,1.7,1.2,2.8 C14.6,11.7,14.2,12.7,13.4,13.4z M19.8,19.8c1.5-1.6,1.5-4.1,0-5.7l-2.9-2.8L16.2,12l2.9,2.8c1.1,1.2,1.1,3.1,0,4.3 c-1.2,1.1-3.1,1.1-4.3,0l-3.5-3.6c-0.6-0.5-0.9-1.3-0.9-2.1c0-0.8,0.3-1.6,0.9-2.1l-0.7-0.7c-0.8,0.7-1.2,1.7-1.2,2.8 c0,1.1,0.4,2.1,1.2,2.8l3.5,3.6c0.7,0.7,1.8,1.1,2.8,1.1C18,21,19,20.6,19.8,19.8z" /></svg>Home</a></li>
<li><a href="#"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M13.4,13.4l-0.7-0.7c0.6-0.5,0.9-1.3,0.9-2.1c0-0.8-0.3-1.6-0.9-2.1L9.2,4.9C8,3.8,6.1,3.8,4.9,4.9C3.8,6.1,3.8,8,4.9,9.2 L7.8,12l-0.7,0.7L4.2,9.9c-1.5-1.6-1.5-4.1,0-5.7c1.6-1.5,4.1-1.5,5.7,0l3.5,3.6c0.8,0.7,1.2,1.7,1.2,2.8 C14.6,11.7,14.2,12.7,13.4,13.4z M19.8,19.8c1.5-1.6,1.5-4.1,0-5.7l-2.9-2.8L16.2,12l2.9,2.8c1.1,1.2,1.1,3.1,0,4.3 c-1.2,1.1-3.1,1.1-4.3,0l-3.5-3.6c-0.6-0.5-0.9-1.3-0.9-2.1c0-0.8,0.3-1.6,0.9-2.1l-0.7-0.7c-0.8,0.7-1.2,1.7-1.2,2.8 c0,1.1,0.4,2.1,1.2,2.8l3.5,3.6c0.7,0.7,1.8,1.1,2.8,1.1C18,21,19,20.6,19.8,19.8z" /></svg>Sezione</a></li>
<li><span aria-current="page">Voce corrente</span></li>
</ol>
</nav>
</div>