Breadcrumb

Breadcrumb is a secondary navigation component that shows the user’s current location inside a site hierarchy. In FrontAlign, breadcrumbs are CSS-only for static use — no JavaScript is required.

Breadcrumbs are useful in documentation sites, e-commerce category pages, admin dashboards, blog archives, and any interface where users move through multiple levels of content.

Getting Started

Apply .breadcrumb to an ordered or unordered list, then use .breadcrumb-item for each step. The current page should receive is-active.

<nav aria-label="Breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item">
      <a class="breadcrumb-link" href="/">Home</a>
    </li>
    <li class="breadcrumb-item">
      <a class="breadcrumb-link" href="/products">Products</a>
    </li>
    <li class="breadcrumb-item is-active">
      <a class="breadcrumb-link" href="/products/headphones" aria-current="page">Wireless Headphones</a>
    </li>
  </ol>
</nav>

Structure

The breadcrumb structure is intentionally small. Separators are injected automatically with CSS pseudo-elements, so you do not need to add separator markup between items.

Element	Class / Attribute	Purpose
Wrapper	`nav` + `aria-label="Breadcrumb"`	Identifies the breadcrumb landmark for assistive technology.
List root	`breadcrumb`	Base class. Apply to an `ol` or `ul`.
Item	`breadcrumb-item`	Represents each step in the page hierarchy.
Link	`breadcrumb-link`	Applies breadcrumb link spacing, color, hover, and focus styling to each anchor.
Active item	`is-active`	Marks the current page and applies muted, non-interactive styling.
Current page	`aria-current="page"`	Announces the active breadcrumb item as the current page for screen readers.

Separator Styles

Add a modifier class to the .breadcrumb root to change the separator style for the whole breadcrumb. Use is-arrow for arrow separators and is-dot for dot separators.

Class	Separator	Character	Use case
`breadcrumb`	Slash	`/`	Default breadcrumb style for classic navigation paths.
`is-arrow`	Right guillemet	`›`	Modern documentation, dashboards, and product flows.
`is-dot`	Dot	`•`	Compact metadata-like trails or softer visual separation.

Slash Separator

The default breadcrumb uses a slash separator. No extra modifier class is required.

<ol class="breadcrumb">
  <li class="breadcrumb-item"><a class="breadcrumb-link" href="/">Home</a></li>
  <li class="breadcrumb-item"><a class="breadcrumb-link" href="/docs">Docs</a></li>
  <li class="breadcrumb-item is-active">
    <a class="breadcrumb-link" href="/docs/components" aria-current="page">Components</a>
  </li>
</ol>

<ol className="breadcrumb">
  <li className="breadcrumb-item"><a className="breadcrumb-link" href="/">Home</a></li>
  <li className="breadcrumb-item"><a className="breadcrumb-link" href="/docs">Docs</a></li>
  <li className="breadcrumb-item is-active">
    <a className="breadcrumb-link" href="/docs/components" aria-current="page">Components</a>
  </li>
</ol>

Arrow Separator

Use is-arrow on the .breadcrumb root to render the arrow separator.

<ol class="breadcrumb is-arrow">
  <li class="breadcrumb-item"><a class="breadcrumb-link" href="/">Home</a></li>
  <li class="breadcrumb-item"><a class="breadcrumb-link" href="/docs">Docs</a></li>
  <li class="breadcrumb-item is-active">
    <a class="breadcrumb-link" href="/docs/components" aria-current="page">Components</a>
  </li>
</ol>

<ol className="breadcrumb is-arrow">
  <li className="breadcrumb-item"><a className="breadcrumb-link" href="/">Home</a></li>
  <li className="breadcrumb-item"><a className="breadcrumb-link" href="/docs">Docs</a></li>
  <li className="breadcrumb-item is-active">
    <a className="breadcrumb-link" href="/docs/components" aria-current="page">Components</a>
  </li>
</ol>

Bullet Separator

Use is-bullet on the .breadcrumb root to render a small dot between items.

<ol class="breadcrumb is-bullet">
  <li class="breadcrumb-item"><a class="breadcrumb-link" href="/">Home</a></li>
  <li class="breadcrumb-item"><a class="breadcrumb-link" href="/docs">Docs</a></li>
  <li class="breadcrumb-item is-active">
    <a class="breadcrumb-link" href="/docs/components" aria-current="page">Components</a>
  </li>
</ol>

With Icons

Icons can be placed inside breadcrumb links. This is useful for a home item or dashboard entry.

<ol class="breadcrumb is-arrow">
  <li class="breadcrumb-item">
    <a class="breadcrumb-link" href="/">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="14"
        height="14"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
        stroke-width="2"
        style="vertical-align: -2px; margin-right: 4px;"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M3 12L12 3l9 9M5 10v9a1 1 0 001 1h4v-4h4v4h4a1 1 0 001-1v-9"
        />
      </svg>
      Home
    </a>
  </li>
  <li class="breadcrumb-item"><a class="breadcrumb-link" href="/products">Products</a></li>
  <li class="breadcrumb-item is-active">
    <a class="breadcrumb-link" href="/products/detail" aria-current="page">Detail</a>
  </li>
</ol>

Home
Products
Detail

Accessibility

Wrap breadcrumbs in a <nav> landmark and use aria-label="Breadcrumb". The active page should include aria-current="page".

<nav aria-label="Breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a class="breadcrumb-link" href="/">Home</a></li>
    <li class="breadcrumb-item"><a class="breadcrumb-link" href="/blog">Blog</a></li>
    <li class="breadcrumb-item is-active">
      <a class="breadcrumb-link" href="/blog/post-1" aria-current="page">My First Post</a>
    </li>
  </ol>
</nav>

Rule	Reason
Use `nav`	Creates a navigation landmark for assistive technology.
Use `aria-label="Breadcrumb"`	Makes the landmark purpose clear when multiple navigation regions exist.
Use `aria-current="page"`	Announces the current page inside the breadcrumb trail.
Keep hierarchy ordered	Use `ol` when the path order matters semantically.

Class Reference

Class / Attribute	Type	Description
`breadcrumb`	Base	Root class for the breadcrumb list.
`breadcrumb-item`	Element	Defines each breadcrumb step.
`breadcrumb-link`	Element	Defines the clickable anchor inside each breadcrumb item.
`is-active`	State	Marks the current page and applies disabled, muted styling.
`is-arrow`	Modifier	Changes the separator to `›`.
`is-dot`	Modifier	Changes the separator to `•`.
`aria-label="Breadcrumb"`	Accessibility	Labels the breadcrumb navigation region.
`aria-current="page"`	Accessibility	Identifies the active/current page link.