Breadcrumbs
Displays the current navigation hierarchy.
Demo
Separators
Replace the contents of the .crumb-separator element with an icon or any valid unicode symbol. For accessibility, use aria-hidden to hide this element from screen readers.
Icons
Add your icon before or after your anchor tag within the .crumb list item.
Mixed Media
Mix and match buttons, avatars, and text.
- Users
- ›
- ›
- Profile
Non-Responsive
Breadcrumbs are responsive by default and will auto-hide all but the last two crumb elements on small screens. If you wish to
disable this behavior, replace .breadcrumb with .breadcrumb-nonresponsive.
<ol class="breadcrumb-nonresponsive">...</ol>Using #each Loops
Use the following technique to ensure the current item is formatted properly and prevent an extra separator at the end.
const myBreadcrumbs = [
{ label: 'Foo', link: '/foo' },
{ label: 'Bar', link: '/bar' },
{ label: 'Fizz', link: '/fizz' },
{ label: 'Buzz', link: '/buzz' }
];<ol class="breadcrumb">
{#each myBreadcrumbs as crumb, i}
<!-- If crumb index is less than the breadcrumb length minus 1 -->
{#if i < myBreadcrumbs.length - 1}
<li class="crumb"><a href={crumb.link}>{crumb.label}</a></li>
<li class="crumb-separator" aria-hidden>›</li>
{:else}
<li class="crumb">{crumb.label}</li>
{/if}
{/each}
</ol>