Breadcrumb

wb-breadcrumb displays the user’s current location within a hierarchy of pages or sections. It is a semantic, zero-JavaScript pattern for admin headers, docs surfaces, CMS flows, and quieter public-page context.

PatternZero JavaScriptCSS separator

Overview Use breadcrumb when the page needs honest hierarchy context, not decorative subtitle text. Keep it secondary to the main page title.

The breadcrumb contract stays intentionally small: semantic nav, ordered list structure, CSS-generated separators, muted interactive ancestor links, and a quiet current-page marker with aria-current="page".

Use when

Admin page hierarchy

CMS edit flows

Settings and detail pages

Nested content areas or public docs

Avoid when

There is no real hierarchy

The path is purely decorative

The path is so deep that clarity gets worse

Anatomy

Class	Role	Notes
`wb-breadcrumb`	Pattern wrapper	Apply it to the semantic `nav`.
`wb-breadcrumb-list`	Ordered list	Use `ol` for path semantics.
`wb-breadcrumb-item`	List item hook	Separator is generated before every item except the first.
`wb-breadcrumb-link`	Ancestor link	Muted by default, interactive on hover/focus.
`wb-breadcrumb-current`	Current page text	Pair with `aria-current="page"`.
`wb-breadcrumb-compact`	Dense variant	Use it for topbars, drawers, and tighter headers.

Canonical HTML structure

<nav class="wb-breadcrumb" aria-label="Breadcrumb">
  <ol class="wb-breadcrumb-list">
    <li class="wb-breadcrumb-item">
      <a class="wb-breadcrumb-link" href="/admin">Dashboard</a>
    </li>
    <li class="wb-breadcrumb-item">
      <a class="wb-breadcrumb-link" href="/admin/pages">Pages</a>
    </li>
    <li class="wb-breadcrumb-item">
      <a class="wb-breadcrumb-link" href="/admin/pages/home">Home</a>
    </li>
    <li class="wb-breadcrumb-item">
      <span class="wb-breadcrumb-current" aria-current="page">Blocks</span>
    </li>
  </ol>
</nav>

Default example

Compact example

CMS hierarchy

Use breadcrumb to keep edit and detail pages anchored to a parent content area.

Public-site example

Public pages can use the same pattern when the hierarchy improves orientation instead of competing with the headline.

Long wrapping path

Wrapping is allowed. The pattern should stay readable without JS truncation or manual separators.

Accessibility notes

LandmarkWrap the breadcrumb in nav and provide aria-label="Breadcrumb".

Ordered pathUse ol because breadcrumb expresses an ordered hierarchy path.

Current pageUse wb-breadcrumb-current and expose aria-current="page". Avoid linking the current page unless there is a product reason.

SeparatorsDo not manually type separators in the markup. They are presentational and CSS-owned.

Do / Don't

Do

Use breadcrumb for real hierarchical navigation.

Keep labels concise.

Mark the current page accessibly.

Use the compact variant in dense toolbars and headers.

Don't

Do not manually type separators.

Do not use breadcrumb as decorative subtitle text.

Do not expose every deep internal system segment when the path becomes noisy.

Do not turn the current item into a link by default.

Playground starter Open the breadcrumb starter in the Playground to test the same canonical markup with the real package CSS.