Components/Breadcrumb

Breadcrumb

Navigation breadcrumbs showing the current page's location in a hierarchy. Semantic, accessible, and customizable.

import { Breadcrumb } from "@animui/ui"

Basic

Custom separator

Truncated (long paths)

Props

PropTypeDefaultDescription
itemsBreadcrumbItem[]Array of { label, href? } items. Last item is current page.
separatorReact.ReactNode"/"Element or string rendered between each item.
classNamestringAdditional classes for the nav element.

Accessibility

  • Rendered as a <nav> with aria-label="Breadcrumb".
  • Last item receives aria-current="page".
  • Separators are hidden from screen readers with aria-hidden="true".
© 2026 Steal Shadow. MIT License.Report an issue