Tailwind

Breadcrumbs

Displays the current navigation hierarchy.

Source Page Source

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.

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.

html
<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.

typescript
const myBreadcrumbs = [
	{ label: 'Foo', link: '/foo' },
	{ label: 'Bar', link: '/bar' },
	{ label: 'Fizz', link: '/fizz' },
	{ label: 'Buzz', link: '/buzz' }
];
html
<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>&rsaquo;</li>
		{:else}
			<li class="crumb">{crumb.label}</li>
		{/if}
	{/each}
</ol>