Breadcrumb v0.1.0 Navigation

Navigation trail; the last item is marked aria-current=page automatically.

import { Breadcrumb } from "latticeui-react";

Examples

Basic

Show code

<Breadcrumb
  items={[
    { label: "Home", href: "#" },
    { label: "Settings", href: "#" },
    { label: "Billing" },
  ]}
/>

Custom separator

Show code

<Breadcrumb separator="›" items={...} />

Anatomy

These data-part attributes are a versioned public API - style and test against them; they will not change in a minor release.

Part	Element	Stable selector
`root`	`nav`	`[data-scope="breadcrumb"][data-part="root"]`
`list`	`ol`	`[data-scope="breadcrumb"][data-part="list"]`
`item`	`li`	`[data-scope="breadcrumb"][data-part="item"]`
`link`	`a`	`[data-scope="breadcrumb"][data-part="link"]`
`separator`	`span`	`[data-scope="breadcrumb"][data-part="separator"]`

Props

Prop	Type	Default	Description
`items` *	`{ label: string; href?: string }[]`	—
`separator`	`ReactNode`	`"/"`

Accessibility

Roles: navigation

Styling

Override styles by targeting the stable selectors below from any unlayered CSS - it always beats the library's @layer latticeui styles, no !important needed.

[data-scope="breadcrumb"][data-part="link"] {
  /* your overrides */
}

State attributes: aria-current="page"