CSS-Only

Breadcrumb

Navigation breadcrumb component showing the current page location within a hierarchical structure. Supports customizable separators, sizes, and semantic HTML.

Example

<nav class="omni-breadcrumb" aria-label="Breadcrumb">
  <span class="omni-breadcrumb-item"><a href="#" class="omni-breadcrumb-link">Home</a></span>
  <span class="omni-breadcrumb-item"><a href="#" class="omni-breadcrumb-link">Products</a></span>
  <span class="omni-breadcrumb-item"><a href="#" class="omni-breadcrumb-link">Electronics</a></span>
  <span class="omni-breadcrumb-item" aria-current="page">Headphones</span>
</nav>

Separators

Slash (default)

The default separator is a forward slash /:

<nav class="omni-breadcrumb" aria-label="Breadcrumb">
  <span class="omni-breadcrumb-item"><a href="#" class="omni-breadcrumb-link">Home</a></span>
  <span class="omni-breadcrumb-item"><a href="#" class="omni-breadcrumb-link">Category</a></span>
  <span class="omni-breadcrumb-item" aria-current="page">Current</span>
</nav>

Chevron

Use data-separator="chevron" for a chevron separator ›:

<nav class="omni-breadcrumb" data-separator="chevron" aria-label="Breadcrumb">
  <span class="omni-breadcrumb-item"><a href="#" class="omni-breadcrumb-link">Home</a></span>
  <span class="omni-breadcrumb-item"><a href="#" class="omni-breadcrumb-link">Category</a></span>
  <span class="omni-breadcrumb-item" aria-current="page">Current</span>
</nav>

Arrow

Use data-separator="arrow" for an arrow separator →:

<nav class="omni-breadcrumb" data-separator="arrow" aria-label="Breadcrumb">
  <span class="omni-breadcrumb-item"><a href="#" class="omni-breadcrumb-link">Home</a></span>
  <span class="omni-breadcrumb-item"><a href="#" class="omni-breadcrumb-link">Category</a></span>
  <span class="omni-breadcrumb-item" aria-current="page">Current</span>
</nav>

Sizes

Extra Small

Use data-size="xs" for compact breadcrumbs:

<nav class="omni-breadcrumb" data-size="xs" aria-label="Breadcrumb">
  <span class="omni-breadcrumb-item"><a href="#" class="omni-breadcrumb-link">Home</a></span>
  <span class="omni-breadcrumb-item"><a href="#" class="omni-breadcrumb-link">Products</a></span>
  <span class="omni-breadcrumb-item" aria-current="page">Details</span>
</nav>

Small (default)

Default size provides balanced readability:

Large

Use data-size="lg" for prominent breadcrumbs:

<nav class="omni-breadcrumb" data-size="lg" aria-label="Breadcrumb">
  <span class="omni-breadcrumb-item"><a href="#" class="omni-breadcrumb-link">Home</a></span>
  <span class="omni-breadcrumb-item"><a href="#" class="omni-breadcrumb-link">Products</a></span>
  <span class="omni-breadcrumb-item" aria-current="page">Details</span>
</nav>

List Markup

For improved semantic HTML, use <ol> and <li> elements:

<nav aria-label="Breadcrumb">
  <ol class="omni-breadcrumb" data-separator="chevron">
    <li class="omni-breadcrumb-item">
      <a class="omni-breadcrumb-link" href="#">Home</a>
    </li>
    <li class="omni-breadcrumb-item">
      <a class="omni-breadcrumb-link" href="#">Library</a>
    </li>
    <li class="omni-breadcrumb-item">
      <a class="omni-breadcrumb-link" href="#">Data</a>
    </li>
    <li class="omni-breadcrumb-item" aria-current="page">Bootstrap</li>
  </ol>
</nav>

Combined Examples

Extra Small with Arrow

Large with Chevron

API Reference

Container Attributes

Attribute Values Default Description
data-separator slash, chevron, arrow slash Separator character style
data-size xs, sm, lg sm Breadcrumb size and spacing

Item Attributes

Attribute Values Description
aria-current page Marks the current page (required)

CSS Classes

Class Element Description
.omni-breadcrumb Container Applied to <nav>, <ol>, or wrapper element
.omni-breadcrumb-item Item Applied to <span>, <li>, or wrapper element
.omni-breadcrumb-link Link Applied to <a> elements within items

Separator Styles

Separator Character Use Case
slash / Default, traditional file-path style
chevron › Modern, directional navigation
arrow → Clear directional hierarchy

Accessibility

  • Required: Wrap breadcrumbs in <nav> element with aria-label="Breadcrumb"
  • Required: Use aria-current="page" on the current page item (not the link)
  • Use semantic list markup (<ol> and <li>) for better screen reader support
  • Current page item should not be a link (screen readers announce it as plain text)
  • All links have clear, descriptive text
  • Keyboard navigation works natively (Tab to focus links, Enter to activate)
  • Focus visible indicators provide clear visual feedback
  • Responsive behavior automatically reduces font size on mobile devices
  • Color contrast meets WCAG AA standards for text and links

Screen Reader Behavior

With proper markup, screen readers announce:

  • "Breadcrumb navigation landmark"
  • "List with [N] items"
  • Each link as "Link, [text]"
  • Current page as "Current page, [text]"

Best Practices

  • Hierarchy: Show the logical hierarchy, not every URL segment
  • Length: Keep breadcrumb trails to 4-6 levels maximum
  • Labels: Use clear, concise labels that match page titles
  • Home: Start with "Home" or your site's root identifier
  • Current page: Always include the current page as the last item
  • Mobile: Consider truncating long trails on mobile (e.g., Home ... Current)
  • Consistency: Use the same separator style across your site
  • Position: Place near the top of the page, below the header