Breadcrumb

An accessible navigation aid that shows the current page's location in a hierarchy. The last crumb is marked as the current page.

import { Breadcrumb } from "@aetherstack/patterns"

Installation

terminal

npx aether-ui add breadcrumb

import.tsx

import { Breadcrumb } from "@aetherstack/patterns"

breadcrumb.tsx

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

Prop	Type	Default	Description
items*	BreadcrumbItem[]	—	Array of crumbs. Last item is the current page.
className	string	—	Additional classes on the <nav> element.

* Required

→Wraps in <nav aria-label="Breadcrumb"> for landmark navigation.
→Rendered as an ordered list (<ol>) — correct semantic structure for a sequence.
→The last item receives aria-current="page" automatically.
→Separators are aria-hidden to avoid being read aloud.