Breadcrumbs

Navigation breadcrumbs showing the user's location within the site hierarchy.

Basic Breadcrumbs

Default breadcrumb navigation with forward slash separator.

HTML

<nav>
  <ul class="focus-breadcrumb">
    <li class="focus-breadcrumb-item"><a href="#">Home</a></li>
    <li class="focus-breadcrumb-item"><a href="#">Library</a></li>
    <li class="focus-breadcrumb-item focus-breadcrumb-item-active">Data</li>
  </ul>
</nav>

Arrow Separator

Use .focus-breadcrumb-arrow for arrow-style separator.

HTML

<ul class="focus-breadcrumb focus-breadcrumb-arrow">
  <li class="focus-breadcrumb-item"><a href="#">Home</a></li>
  <li class="focus-breadcrumb-item"><a href="#">Products</a></li>
  <li class="focus-breadcrumb-item"><a href="#">Electronics</a></li>
  <li class="focus-breadcrumb-item focus-breadcrumb-item-active">Laptops</li>
</ul>

Chevron Separator

Use .focus-breadcrumb-chevron for chevron-style separator.

HTML

<ul class="focus-breadcrumb focus-breadcrumb-chevron">
  <li class="focus-breadcrumb-item"><a href="#">Dashboard</a></li>
  <li class="focus-breadcrumb-item"><a href="#">Users</a></li>
  <li class="focus-breadcrumb-item focus-breadcrumb-item-active">Profile</li>
</ul>

Card Style

Add .focus-breadcrumb-card for breadcrumbs with background card.

HTML

<ul class="focus-breadcrumb focus-breadcrumb-card">
  <li class="focus-breadcrumb-item"><a href="#">Home</a></li>
  <li class="focus-breadcrumb-item"><a href="#">Settings</a></li>
  <li class="focus-breadcrumb-item focus-breadcrumb-item-active">Security</li>
</ul>

<!-- Card with Arrow Separator -->
<ul class="focus-breadcrumb focus-breadcrumb-card focus-breadcrumb-arrow">
  <li class="focus-breadcrumb-item"><a href="#">Dashboard</a></li>
  <li class="focus-breadcrumb-item"><a href="#">Reports</a></li>
  <li class="focus-breadcrumb-item focus-breadcrumb-item-active">Analytics</li>
</ul>

CSS Classes Reference

Class	Description
`.focus-breadcrumb`	Main breadcrumb list container
`.focus-breadcrumb-item`	Individual breadcrumb item
`.focus-breadcrumb-item-active`	Current/active breadcrumb item
`.focus-breadcrumb-arrow`	Use arrow (›) as separator
`.focus-breadcrumb-chevron`	Use chevron as separator
`.focus-breadcrumb-card`	Card style with background