NAVIGATION

Breadcrumbs

Hierarchy trail rendered as a labelled <nav> landmark. The last item should be marked current so it renders as plain text with aria-current="page".

Import

import { Breadcrumbs, BreadcrumbItem } from 'damo-ui'

Basic usage

1<Breadcrumbs>
2  <BreadcrumbItem href="/">Home</BreadcrumbItem>
3  <BreadcrumbItem href="/docs">Docs</BreadcrumbItem>
4  <BreadcrumbItem href="/docs/components">Components</BreadcrumbItem>
5  <BreadcrumbItem current>Breadcrumbs</BreadcrumbItem>
6</Breadcrumbs>

Custom separator

1<Breadcrumbs separator={<span aria-hidden>/</span>}>
2  …
3</Breadcrumbs>

Props

Breadcrumbs props
PropTypeDefaultDescription
separatorReactNode—Custom node rendered between items. Defaults to a Memphis ChevronRightIcon. Override for a slash, dot, or any glyph.
childrenReactNode—A list of BreadcrumbItem children.
classNamestring—Tailwind classes are merged on the wrapping <nav>.

BreadcrumbItem props

BreadcrumbItem props
PropTypeDefaultDescription
hrefstring—Link target. Omit on the last (current) item.
currentboolean—Mark the item as the current page — renders a non-link <span> with aria-current="page".
childrenReactNode—Item label.

Accessibility

  • The wrapper renders <nav aria-label="Breadcrumb"> containing an ordered list — the canonical pattern for breadcrumb landmarks.
  • Separators are rendered as role="presentation" + aria-hidden, so screen readers announce only the item labels.
  • The current page should be the last item with current set — Radix renders it as a non-link <span> with aria-current="page".
← NavItemPagination →