Tailwind

Breadcrumbs

Displays the current navigation hierarchy.

Source Page Source

Demo

  1. Skeleton
  2. ›
  3. Elements
  4. ›
  5. Breadcrumbs

Separators

Replace the contents of the .crumb-separator element with an icon or any valid unicode symbol. For accessability, use aria-hidden to hide this element from screen readers.

  1. Home
  2. /
  3. Blog
  4. /
  5. Article

Icons

Add your icon before or after your anchor tag within the .crumb list item.

  2. ›
  4. ›
  5. Current

Mixed Media

Mix and match buttons, avatars, and text.

  1. Users
  2. ›
  4. ›
  5. 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.

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 seperator 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>