Breadcrumb

Default density Compact density Restart from the initial state Show the copyable source

Home Settings Billing Invoices

Usage

Put each step as a direct child: native <a> links for ancestors and a plain element for the current page, which is marked with aria-current="page" automatically. Links keep their destinations, modified clicks and listeners, so no router is needed. Name the landmark with label when a page has more than one navigation. An authored aria-current is preserved. An actionable terminal item remains actionable and is not automatically relabeled as current-page text.

Separator

Default density Compact density Restart from the initial state Show the copyable source

northwind web-app src README.md

The default separator is a chevron that mirrors in right-to-left layouts. separator swaps it for text, such as a slash for file paths. Separators are hidden from assistive technology.

Collapsed ancestors

Default density Compact density Restart from the initial state Show the copyable source

Docs Guides Data Fetching Caching Revalidating

Collapsing is up to you: replace the middle ancestors with a named Button that opens a Menu of the hidden links. If the omission doesn’t need to be reachable, use a decorative mark with aria-hidden="true" and data-breadcrumb-ellipsis instead.

Default density Compact density Restart from the initial state Show the copyable source

Account Orders #10482

The mark gets separators like any step but is skipped by screen readers and never takes focus. Use it when the omitted pages are reachable another way, such as from the account menu.

Ancestor menu

Default density Compact density Restart from the initial state Show the copyable source

Acme Settings General Members Billing Security

An ancestor can open a menu of its sibling sections, so readers jump sideways without going up a level first. The trigger shows the ancestor’s own name, with a chevron to say it opens a list.

Responsive collapse

Default density Compact density Restart from the initial state Show the copyable source

Docs Guides Data Fetching Caching Revalidating

On a phone, a drawer of hidden pages is easier to tap than a menu. The breadcrumb keeps the same trail either way; your code picks the surface for the viewport, and each one keeps its own focus and dismissal. Resize the window across 768 px to switch.

Wrapping

Default density Compact density Restart from the initial state Show the copyable source

Shop Home office Desks Standing desks Oak electric standing desk, 160 cm

In a narrow container the trail wraps instead of overflowing. Collapse ancestors when a wrapped trail would push content too far down.

API Reference

Every element also accepts motion-policy.