Bulma Breadcrumb

The Breadcrumb component in Bulma provides a simple way to create hierarchical navigation. It helps users understand their current location within a website and navigate back to parent sections easily.

Basic Breadcrumb

The basic breadcrumb structure uses .breadcrumb and list items:

<nav class="breadcrumb" aria-label="breadcrumbs">
  <ul>
    <li><a href="#">Bulma</a></li>
    <li><a href="#">Documentation</a></li>
    <li><a href="#">Components</a></li>
    <li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
  </ul>
</nav>

Breadcrumb with Icons

<nav class="breadcrumb" aria-label="breadcrumbs">
  <ul>
    <li>
      <a href="#">
        <span class="icon is-small">
          <i class="fas fa-home"></i>
        </span>
        <span>Home</span>
      </a>
    </li>
    <li>
      <a href="#">
        <span class="icon is-small">
          <i class="fas fa-book"></i>
        </span>
        <span>Library</span>
      </a>
    </li>
    <li>
      <a href="#">
        <span class="icon is-small">
          <i class="fas fa-puzzle-piece"></i>
        </span>
        <span>Components</span>
      </a>
    </li>
    <li class="is-active">
      <a href="#" aria-current="page">
        <span class="icon is-small">
          <i class="fas fa-thumbs-up"></i>
        </span>
        <span>Breadcrumb</span>
      </a>
    </li>
  </ul>
</nav>

Separator Options

Bulma provides several separator styles:

Arrow Separator (Default)

<nav class="breadcrumb" aria-label="breadcrumbs">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Products</a></li>
    <li class="is-active"><a href="#">Details</a></li>
  </ul>
</nav>

Bullet Separator

<nav class="breadcrumb has-bullet-separator" aria-label="breadcrumbs">
  <ul>
    <li><a href="#">Dashboard</a></li>
    <li><a href="#">Settings</a></li>
    <li class="is-active"><a href="#">Profile</a></li>
  </ul>
</nav>

Dot Separator

<nav class="breadcrumb has-dot-separator" aria-label="breadcrumbs">
  <ul>
    <li><a href="#">Admin</a></li>
    <li><a href="#">Manage</a></li>
    <li><a href="#">Users</a></li>
    <li class="is-active"><a href="#">Edit</a></li>
  </ul>
</nav>

Succeeds Separator

<nav class="breadcrumb has-succeeds-separator" aria-label="breadcrumbs">
  <ul>
    <li><a href="#">Category</a></li>
    <li><a href="#">Subcategory</a></li>
    <li class="is-active"><a href="#">Item</a></li>
  </ul>
</nav>

Breadcrumb Sizes

<!-- Small Breadcrumb -->
<nav class="breadcrumb is-small" aria-label="breadcrumbs">
  <ul>
    <li><a href="#">Small</a></li>
    <li class="is-active"><a href="#">Breadcrumb</a></li>
  </ul>
</nav>

<!-- Medium Breadcrumb (Default) -->
<nav class="breadcrumb is-medium" aria-label="breadcrumbs">
  <ul>
    <li><a href="#">Medium</a></li>
    <li class="is-active"><a href="#">Breadcrumb</a></li>
  </ul>
</nav>

<!-- Large Breadcrumb -->
<nav class="breadcrumb is-large" aria-label="breadcrumbs">
  <ul>
    <li><a href="#">Large</a></li>
    <li class="is-active"><a href="#">Breadcrumb</a></li>
  </ul>
</nav>

Centered and Aligned Breadcrumbs

<!-- Centered Breadcrumb -->
<nav class="breadcrumb is-centered" aria-label="breadcrumbs">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Products</a></li>
    <li class="is-active"><a href="#">Current</a></li>
  </ul>
</nav>

<!-- Right Aligned Breadcrumb -->
<nav class="breadcrumb is-right" aria-label="breadcrumbs">
  <ul>
    <li><a href="#">First</a></li>
    <li><a href="#">Second</a></li>
    <li class="is-active"><a href="#">Third</a></li>
  </ul>
</nav>

Responsive Breadcrumb

<nav class="breadcrumb" aria-label="breadcrumbs">
  <ul>
    <!-- Hidden on mobile, shown on tablet and above -->
    <li class="is-hidden-mobile">
      <a href="#">
        <span class="icon">
          <i class="fas fa-home"></i>
        </span>
        <span>Home</span>
      </a>
    </li>
    
    <!-- Always visible -->
    <li><a href="#">Category</a></li>
    
    <!-- Truncated on mobile -->
    <li class="is-hidden-mobile"><a href="#">Subcategory</a></li>
    
    <!-- Active item -->
    <li class="is-active">
      <a href="#" aria-current="page">
        <span class="is-hidden-mobile">Current Page Title</span>
        <span class="is-hidden-tablet">Current</span>
      </a>
    </li>
  </ul>
</nav>

Breadcrumb with Dropdown

<nav class="breadcrumb" aria-label="breadcrumbs">
  <ul>
    <li><a href="#">Home</a></li>
    
    <!-- Dropdown breadcrumb item -->
    <li class="has-dropdown">
      <a href="#" class="dropdown-trigger">
        <span>Products</span>
        <span class="icon is-small">
          <i class="fas fa-angle-down"></i>
        </span>
      </a>
      <ul class="dropdown-menu">
        <li><a href="#">Electronics</a></li>
        <li><a href="#">Clothing</a></li>
        <li><a href="#">Books</a></li>
      </ul>
    </li>
    
    <li class="is-active"><a href="#">Details</a></li>
  </ul>
</nav>

Use Cases

1. E-commerce Product Navigation

<nav class="breadcrumb has-arrow-separator" aria-label="breadcrumbs">
  <ul>
    <li>
      <a href="/">
        <span class="icon is-small">
          <i class="fas fa-home"></i>
        </span>
        <span>Home</span>
      </a>
    </li>
    <li>
      <a href="/electronics">
        <span class="icon is-small">
          <i class="fas fa-laptop"></i>
        </span>
        <span>Electronics</span>
      </a>
    </li>
    <li>
      <a href="/electronics/computers">
        <span>Computers & Tablets</span>
      </a>
    </li>
    <li>
      <a href="/electronics/computers/laptops">
        <span>Laptops</span>
      </a>
    </li>
    <li class="is-active">
      <a href="#" aria-current="page">
        <span>MacBook Pro 16"</span>
      </a>
    </li>
  </ul>
</nav>

2. Admin Dashboard Navigation

<nav class="breadcrumb has-bullet-separator" aria-label="breadcrumbs">
  <ul>
    <li>
      <a href="/admin">
        <span class="icon is-small">
          <i class="fas fa-tachometer-alt"></i>
        </span>
        <span>Dashboard</span>
      </a>
    </li>
    <li>
      <a href="/admin/users">
        <span class="icon is-small">
          <i class="fas fa-users"></i>
        </span>
        <span>User Management</span>
      </a>
    </li>
    <li class="is-active">
      <a href="#" aria-current="page">
        <span class="icon is-small">
          <i class="fas fa-edit"></i>
        </span>
        <span>Edit User: John Doe</span>
      </a>
    </li>
  </ul>
</nav>

3. Documentation Navigation

<nav class="breadcrumb is-small has-dot-separator" aria-label="breadcrumbs">
  <ul>
    <li><a href="/docs">Documentation</a></li>
    <li><a href="/docs/getting-started">Getting Started</a></li>
    <li><a href="/docs/components">Components</a></li>
    <li class="is-active">
      <a href="#" aria-current="page">Breadcrumb Component</a>
    </li>
  </ul>
</nav>

Accessibility Considerations

<!-- Proper ARIA labels -->
<nav class="breadcrumb" aria-label="breadcrumbs">
  <ul>
    <li>
      <a href="/">Home</a>
    </li>
    <li>
      <!-- Use aria-current for current page -->
      <a href="/current" aria-current="page">Current Page</a>
    </li>
  </ul>
</nav>

<!-- Screen reader only text -->
<nav class="breadcrumb" aria-label="breadcrumbs">
  <ul>
    <li>
      <a href="/">
        <span class="icon">
          <i class="fas fa-home" aria-hidden="true"></i>
        </span>
        <span>Home</span>
        <span class="sr-only">(Navigate to home page)</span>
      </a>
    </li>
  </ul>
</nav>

Customization

/* Custom separator */
.breadcrumb.has-custom-separator ul li+li::before {
  content: '›';
  color: #ff3860;
}

/* Custom colors */
.breadcrumb a {
  color: #3273dc;
}

.breadcrumb a:hover {
  color: #363636;
  border-bottom: 1px solid #3273dc;
}

.breadcrumb li.is-active a {
  color: #363636;
  font-weight: bold;
}

/* Custom breadcrumb styles */
.breadcrumb.is-dark {
  background-color: #363636;
  border-radius: 4px;
  padding: 0.75em;
}

.breadcrumb.is-dark a {
  color: #f5f5f5;
}

.breadcrumb.is-dark li.is-active a {
  color: #fff;
  opacity: 0.9;
}

Best Practices

• Always use proper ARIA labels for accessibility
• Keep breadcrumb trails concise (3-5 levels maximum)
• Use meaningful labels that match page titles
• Consider mobile responsiveness for long breadcrumbs
• Make breadcrumb links actually navigable
• Use icons sparingly to maintain clarity
• Test breadcrumb functionality on all screen sizes

Up next: Bulma Button Component