Breadcrumbs

Tailwind

Displays the current navigation hierarchy.

@skeletonlabs/skeleton
Source Code
View Page Source

Examples

  1. Tailwind
  2. ›
  3. Elements
  4. ›
  5. Breadcrumbs
  1. Home
  2. /
  3. Blog
  4. /
  5. Article
  1. Users
  2. ›
  4. ›
  5. Settings
  2. ›
  4. ›
  5. Current

Getting Started

Create an ordered list, apply the .breadcrumb class, then set .crumb and .crumb-separator to each list item.

html 
<ol class="breadcrumb">
	<li class="crumb"><a href="/">Home</a></li>
	<li class="crumb-separator" aria-hidden>&rsaquo;</li>
	<li class="crumb"><a href="/articles">Articles</a></li>
	<li class="crumb-separator" aria-hidden>&rsaquo;</li>
	<li>Current</li>
</ol>

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 Icons

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

html 
<li class="crumb-separator" aria-hidden>(icon)</li>
html 
<li class="crumb">
	<span>(icon)</span>
	<a href="/">Home</a>
</li>

Separators

Apply the .crumb-separator class to each list item containing your separator icon or unicode symbol. Per accessability, make sure to implement aria-hidden to hide this element from screen readers.

html 
<li class="crumb-separator" aria-hidden>&rsaquo;</li>
html 
<li class="crumb-separator" aria-hidden>(icon)</li>

Current Page

We recommend the last item not include an anchor link, as this indicates the page the user is currently on.

html 
<li>Current</li>

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>