When to use it

Use Breadcrumb when the page sits inside a catalog or content hierarchy and visitors need a visible trail back to parent levels. It is standard on product detail pages, category listings, account sub-pages, and any view deeper than two levels.

If the page structure is flat (homepage, landing pages, single-level settings), breadcrumbs add noise without value.

Slot strategy

Breadcrumb is a list-based composition:

• Breadcrumb is the root <nav> element with an aria-label for screen readers.
• BreadcrumbList is the ordered list (<ol>) that holds the items.
• BreadcrumbItem wraps each segment in the trail.
• BreadcrumbLink is a clickable ancestor link. Use standard href for navigation.
• BreadcrumbPage marks the current page. It renders as plain text with aria-current="page" instead of a link.
• BreadcrumbSeparator renders a visual divider between items (defaults to a slash or chevron icon).
• BreadcrumbEllipsis collapses middle segments into a "..." indicator for deep paths.

Behavior and theming guidance

The component renders semantic HTML (nav > ol > li) with proper ARIA attributes, so screen readers announce it as a navigation landmark. Keep the trail short: show the root, one or two relevant ancestors, and the current page. Use BreadcrumbEllipsis when the full path would exceed four or five visible segments.

Links use muted foreground colors by default and the current page uses the regular foreground color, which creates a natural visual hierarchy without extra styling. The separator inherits the muted color to stay unobtrusive.