Breadcrumb

The trail back up the hierarchy. An ordered list in a labelled nav, with the current page marked aria-current and deliberately not linked.

src/components/ui/breadcrumb.tsx

About

From the component's own source, where it was written.

The trail back up the hierarchy.

An ordered list inside a labelled <nav>, because the order carries meaning. The current page is a <span aria-current="page">, not a link — linking to where you already are is noise for a screen reader.

Install

npx astralyx-ui add breadcrumb

Usage

import {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbSeparator,
  BreadcrumbPage,
} from '@/components/ui/breadcrumb'

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Composer

Change the props and the source below follows.

Props

separator

collapse middle

tsx

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="/components">Components</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Examples

Default

tsx

<Breadcrumb>…</Breadcrumb>

Custom separator

tsx

<BreadcrumbSeparator>/</BreadcrumbSeparator>
<BreadcrumbSeparator>&rsaquo;</BreadcrumbSeparator>

Collapsed

tsx

<BreadcrumbItem><BreadcrumbEllipsis /></BreadcrumbItem>

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

Prop	Type	Default	Description
children	ReactNode	required	—
label	string	'Breadcrumb'	Accessible name for the nav landmark.

`BreadcrumbList`

Ordered, because the sequence carries meaning.

Extends ComponentProps<'ol'>.

`BreadcrumbItem`

Extends ComponentProps<'li'>.

`BreadcrumbLink`

A navigable ancestor. Accepts any anchor props, including asChild-style routing via a custom element.

Extends ComponentProps<'a'>.

Prop	Type	Default	Description
asChild	boolean	false	—

`BreadcrumbPage`

The current page: aria-current="page" and not a link, since linking to where you already are is noise.

Extends ComponentProps<'span'>.

`BreadcrumbSeparator`

Presentational and aria-hidden. Defaults to a chevron; pass children to replace it.

Extends ComponentProps<'li'>.

`BreadcrumbEllipsis`

Stands in for collapsed middle segments.

Extends ComponentProps<'span'>.

Prop	Type	Default	Description
label	ReactNode	'More'	Screen-reader text for the collapsed items.