Breadcrumb

Shows where the user is within a hierarchy and lets them jump back up.

import { Breadcrumb } from '@basiiik/ui';

The snippet an agent gets

From get_component_snippet, with the required props filled in from the spec. Every snippet is type-checked against the library before it is shipped.

import { Breadcrumb } from '@basiiik/ui';

<Breadcrumb items={[{ label: 'Home', href: '/' }, { label: 'Projects', href: '/projects' }, { label: 'Website redesign' }]} />

Example values were filled in for the required prop items: replace them with your own.
Values in braces are your own variables, handlers or data, such as const [open, setOpen] = useState(false).
Pass items; the last is the current page. Collapsing is automatic once items exceed maxItems; activating the ellipsis expands the path.
Storybook: Navigation/Breadcrumb.

Props

Prop	Type	Notes
`size`	`"sm" \| "md"`	Default "sm"
`maxItems`	`number`
`items` required	`BreadcrumbItem[]`

Other props

Prop	Type	What it does
`aria-label`	`string`	Accessible name of the landmark.
`expandLabel`	`string`	Accessible name of the ellipsis button.

States. Pass items; the last is the current page. Collapsing is automatic once items exceed maxItems; activating the ellipsis expands the path.

Native attributes such as className, id and data-* are forwarded to the root element.

Use it when

Show and navigate a page hierarchy

Do not use it when

Flat sites with no hierarchy

Rules for agents

Pass items from the top of the hierarchy to the current page; every ancestor has an href and the last item has none
Place the Breadcrumb above the page title
Leave maxItems at 4 unless space requires otherwise; the middle collapses behind an ellipsis that expands the full path
Each label matches the title of the page it links to

Avoid

A Breadcrumb on a flat site or a top-level page with no parents
Using a Breadcrumb as the only navigation
Showing the browsing history instead of the page hierarchy
Making the current page a link

Writing the content

Use the page titles, shortened only if they are very long
Use sentence case unless the page title is a name

Keyboard

Tab through links

Accessibility

aria-current="page" on the last item
Separators are decorative (aria-hidden)

Colour tokens it reads

color.icon.secondarycolor.text.primarycolor.text.secondary

navigation 4 Figma variants Try it in the live demo