Breadcrumb

A navigation trail. Renders as <nav><ol> with proper landmark and list semantics. Mark the current page with current and customize the separator however you like.

Features

Semantic <nav> + <ol> structure with built-in aria-label.

Current-page marking via current (adds aria-current="page").

Customizable separator content — text, character, or icon.

asChild on Link to wrap router links (Next, React Router, etc.).

Example

Anatomy


import { Breadcrumb } from '@wire-ui/react'
 
<Breadcrumb.Root>
<Breadcrumb.List>
<Breadcrumb.Item>
  <Breadcrumb.Link href="/">Home</Breadcrumb.Link>
</Breadcrumb.Item>
<Breadcrumb.Separator />
<Breadcrumb.Item>
  <Breadcrumb.Link href="/settings">Settings</Breadcrumb.Link>
</Breadcrumb.Item>
<Breadcrumb.Separator />
<Breadcrumb.Item current>Profile</Breadcrumb.Item>
</Breadcrumb.List>
</Breadcrumb.Root>

Styling

The current item exposes data-current. Use it to style the active page differently from the link siblings.


<Breadcrumb.Item current className="
  text-black font-medium
  data-[current]:cursor-default
">
  Current page
</Breadcrumb.Item>

Using data attributes

The current Item sets data-current="" and aria-current="page".


li[data-current] { color: black; font-weight: 500; }
li[data-current] a { pointer-events: none; }

Using `asChild` on Link

asChild lets you replace the <a> with a framework router link (Next.js <Link>, React Router <Link>, etc.) while keeping the Breadcrumb semantics.


<Breadcrumb.Link asChild>
  <NextLink href="/dashboard">Dashboard</NextLink>
</Breadcrumb.Link>

Root props

Prop	Type	Default	Description
`aria-label`	`string`	`'Breadcrumb'`	Accessible label for the navigation landmark
`...rest`	`HTMLAttributes<HTMLElement>`	—	All standard HTML nav attributes

List props

Prop	Type	Description
`...rest`	`OlHTMLAttributes<HTMLOListElement>`	All standard HTML ol attributes

Item props

Prop	Type	Default	Description
`current`	`boolean`	`false`	Marks this item as the current page
`...rest`	`LiHTMLAttributes<HTMLLIElement>`	—	All standard HTML li attributes

Link props

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Render the child element instead of an `<a>`
`href`	`string`	—	Anchor target (when not using `asChild`)
`...rest`	`AnchorHTMLAttributes<HTMLAnchorElement>`	—	All standard HTML anchor attributes

Separator props

Prop	Type	Description
`children`	`ReactNode`	Custom separator content (defaults to `/`)
`...rest`	`HTMLAttributes<HTMLSpanElement>`	All standard HTML span attributes

Data attributes

Attribute	Element	When present
`data-current`	Item	Present when `current` is true

Item also sets aria-current="page" when current. Separator sets role="presentation" and aria-hidden="true".

Accessibility

Root renders as a <nav> landmark with aria-label="Breadcrumb" by default.
List renders as an ordered list (<ol>) so screen readers announce position.
The current Item is exposed via aria-current="page" — most assistive tech announces it.
Separators are decorative: role="presentation", aria-hidden="true".