breadcrumbs

Example

Quiet ancestor links and a plain current-page label. Long trails wrap naturally; separators stay attached to the following crumb.

Open the full example for narrow-width, dark-theme, and RTL controls.

Usage

<nav data-breadcrumbs aria-label="Breadcrumb">
  <ol role="list">
    <li><a href="/projects">Projects</a></li>
    <li><span aria-current="page">Website refresh</span></li>
  </ol>
</nav>

Use a native navigation landmark, ordered list, and real links. The current page can be a span or an a with aria-current="page". The explicit list role preserves list semantics when list markers are removed in Safari. Separators are decorative CSS borders with no spoken text.

No JavaScript is needed for the full trail. Mica does not generate hierarchy, infer routes, truncate labels, or hide ancestors automatically.

Collapsed ancestors

For a deep hierarchy, author the earlier ancestors inside a disclosure at the beginning of the list. Keep the immediate parent and current page visible. The native disclosure still opens and closes without JavaScript.

<script type="module" src="breadcrumbs.js"></script>
<nav data-breadcrumbs aria-label="Breadcrumb">
  <ol role="list">
    <li>
      <m-breadcrumb-overflow>
        <details>
          <summary aria-label="Show ancestor pages">…</summary>
          <ol data-breadcrumb-menu role="list">
            <li><a href="/">Workspace</a></li>
            <li><a href="/team">Design team</a></li>
          </ol>
        </details>
      </m-breadcrumb-overflow>
    </li>
    <li><a href="/projects">Projects</a></li>
    <li><span aria-current="page">Website refresh</span></li>
  </ol>
</nav>

The optional module enhances each m-breadcrumb-overflow instance. It positions the panel within the viewport and flips above when needed, adds Escape with summary focus restoration, and closes on outside click, focus leaving, or an unprevented link activation. Modified link clicks retain browser behavior.

Tab and Shift+Tab use native focus order. These are navigation links, not an ARIA menu widget. The module generates no content and does not change routes.

Without the module, the panel opens beneath its summary using CSS positioning. It does not automatically clamp to viewport edges or dismiss on Escape/outside click. Place the disclosure first and avoid clipping ancestors. Enhanced panels use fixed positioning, not the top layer; transformed ancestors can change their containing block.

API

Part	Contract	Description
`data-breadcrumbs`	Native `nav` with a direct `ol`	Direct list items contain ancestor links or the current-page label.
`m-breadcrumb-overflow`	Optional child of a list item	One direct `details`, with `summary` first and the ancestor list after it.
`data-breadcrumb-menu`	Direct `ol` inside the disclosure	Native list items and links. Supply a descriptive summary label.

Token	Default	Description
`--breadcrumb-font-size`	.8125rem	Trail and ancestor link size.
`--breadcrumb-gap`	`--space-xs`	Horizontal spacing.
`--breadcrumb-row-gap`	`--space-2xs`	Space between wrapped rows.
`--breadcrumb-current-weight`	500	Current-page and disclosure-trigger emphasis.
`--breadcrumb-separator-size`	.3rem	Decorative chevron size.
`--breadcrumb-separator-color`	`--color-text-muted`	Decorative chevron color.
`--breadcrumb-menu-width`	14rem	Preferred ancestor panel width, capped to the viewport.
`--breadcrumb-overflow-font-size`	1rem	Ancestor disclosure trigger text size.
`--breadcrumb-menu-target`	2.25rem	Disclosure width and minimum height; ancestor link minimum height.
`--breadcrumb-menu-z`	5	Enhanced and native panel stacking level.

Shared color and radius tokens apply throughout. Internal data-m-* state and --m-* placement values belong to the enhancement.