New This website is new, your feedback will help us to improve it.

Breadcrumbs

Overview

Use the .bsk-breadcrumb class with a list of navigation items to indicate the current page's location within a hierarchy.

Each navigation item must use an <a> element, except for the last item which can be a <span>


For assistive technologies, all navigation elements should use a role=navigation attribute on an element which wraps around the element using the .bsk-nav class.

Variants

Default breadcrumb

<div class="bsk-breadcrumb my-2">
  <nav aria-label="breadcrumb">
      <ol class="flex flex-wrap gap-1">            
          <li><a href="index.html" class="text-blue-600 hover:underline">Level 1</a></li>            
          <li><a href="components/index.html" class="text-blue-600 hover:underline">Level 2</a></li>
          <li><span>Level 3</span></li>
      </ol>
  </nav>
</div>

States

Active item

Add the .bsk-active class to the drop-down menu item currently active, to highlight where the end user is in the site.


Make sure to include a <span class="sr-only">(current)</span> element as well.
This provides a non-visual indication of the currently active item, suitable for assistive technologies.

<div class="bsk-breadcrumb my-2">
  <nav aria-label="breadcrumb">
      <ol class="flex flex-wrap gap-1">            
          <li><a href="#" class="text-blue-600 hover:underline">Level 1</a></li>            
          <li><a href="#" class="text-blue-600 hover:underline">Level 2</a></li>
          <li class="bsk-active"><span class="sr-only">(current)</span>Level 3</li>
      </ol>
  </nav>
</div>