Breadcrumb
Indicate the current page’s location within a navigational hierarchy. The separator is added automatically between items via CSS — no markup or props required.
Import
import { Breadcrumb, BreadcrumbItem } from '@metatoy/bootstrap-styled';Basic
Breadcrumb renders an ordered list; each BreadcrumbItem is a list item. Mark the
current page with active — it becomes non-interactive and gets aria-current="page".
With links
Put an anchor inside each non-active item. Links keep the underlined Reboot style and use
the theme’s link color; the trailing active item is plain text.
Props
Breadcrumb is the <ol> container and accepts all native ordered-list attributes.
Each child is a BreadcrumbItem:
| Prop | Type | Default | Description |
|---|---|---|---|
| active | boolean | — | — |
BreadcrumbItem also accepts all native <li> attributes.
Theming
The / divider and the active item’s text use --bs-secondary. Links inside items read
--bs-link-color and --bs-link-hover-color. The gap around the divider is controlled by
--bs-breadcrumb-item-padding-x (default 0.5rem) — set it on the Breadcrumb to widen
or tighten the spacing.
Accessibility
Wrap the breadcrumb in <nav aria-label="breadcrumb"> so assistive tech announces it as a
navigation landmark. The active item is marked aria-current="page" automatically,
identifying the user’s current location.
Explore in Ladle
The library doesn’t ship a dedicated Breadcrumb story yet — browse the component gallery: Open in Ladle.