elements
Manual UI Templates Breadcrumb

Breadcrumb

elements man ui/templates/breadcrumb

The path to the current page as a trail of links, composed from parts or built from a list.

Example
import {
  Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator,
  BreadcrumbEllipsis,
} from "@elements/ui/breadcrumb";

<Breadcrumb>
  <BreadcrumbItem><BreadcrumbLink href="/">Home</BreadcrumbLink></BreadcrumbItem>
  <BreadcrumbSeparator />
  <BreadcrumbItem><BreadcrumbLink href="/docs">Docs</BreadcrumbLink></BreadcrumbItem>
  <BreadcrumbSeparator />
  <BreadcrumbItem><BreadcrumbPage>Breadcrumb</BreadcrumbPage></BreadcrumbItem>
</Breadcrumb>

<Breadcrumb items={trail} maxItems={4} />

Parts

Part What it is
Breadcrumb The nav landmark and its ordered list. Takes parts, or items to build the trail.
BreadcrumbItem One step: a list item.
BreadcrumbLink A link to an ancestor page.
BreadcrumbPage The current page: aria-current="page", not a link.
BreadcrumbSeparator Between items; a chevron unless the slot gives another.
BreadcrumbEllipsis Stands in for collapsed items.

Attributes

Breadcrumb

Attribute Type Default Description
label string "Breadcrumb" aria-label of the nav landmark.
items { label: string; href?: string; attrs?: Record<string, ...> }[] [] Builds the trail: separators between entries, the last one the current page (a link if it has href). attrs go on an entry's link. A new trail starts collapsed. Empty uses the slot.
maxItems number 0 With items: collapse a longer trail behind an ellipsis button. 0 never collapses.
itemsBefore number 1 With items: entries kept before the ellipsis.
itemsAfter number 1 With items: entries kept after it.
separator IconName "chevron-right" With items: the separator icon.
separatorText string "" With items: text between the entries in place of the icon, such as "›" or "/". Hidden from assistive tech, like the icon.
collapsedIcon IconName "more-horizontal" With items: the icon on the ellipsis button.
expandText string "Show the full path" With items: aria-label of the ellipsis button. Translate it along with label.
class string "" Extra classes on the nav. Every part takes class.
attrs Record<string, string | number | boolean | undefined> {} Other attributes for the nav: id, data-*, or aria-labelledby to name the landmark by a visible heading (label is then left off).

BreadcrumbLink

Attribute Type Default Description
href string (required) The link target.
current boolean false The current page kept as a link: aria-current="page", page ink.
attrs Record<string, string | number | boolean | undefined> {} Other attributes for the anchor: title, target, rel, data-*.

Slots

Slot Part Content
default Breadcrumb BreadcrumbItems and BreadcrumbSeparators, when items is empty.
default BreadcrumbLink The link text, or an Icon and text.
default BreadcrumbPage The current page's name.
default BreadcrumbSeparator A replacement separator: text or an Icon.

Keyboard

Keys Action
Tab Moves through the links.
Enter Follows a link; on the ellipsis button, shows the full trail and focuses the first revealed link.

Data attributes

Attribute Values On
data-collapsed present while collapsed Breadcrumb (items)

Accessibility

  • Follows the WAI-ARIA breadcrumb pattern: a nav landmark labelled Breadcrumb around an ordered list.
  • The current page has aria-current="page"; rendered as a span it also gets role="link" and aria-disabled="true".
  • Separators and the static ellipsis are role="presentation" and aria-hidden, so the trail reads as a list of links.
  • The ellipsis button in items mode is labelled by expandText, "Show the full path" by default.

See also