Tailwind

Breadcrumbs

Displays the current navigation hierarchy.

Source Page Source

Demo

  1. Skeleton
  2. Elements
  3. Breadcrumbs

Separators

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

  1. Home
  2. Blog
  3. Article

Icons

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

  3. Current

Mixed Media

Mix and match buttons, avatars, and text.

  1. Users
  3. 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 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 class="anchor" 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>