Breadcrumb

A breadcrumb navigation component showing the user's location within a page hierarchy.

Default

Breadcrumb uses a compound component pattern with explicit separators between items. The final item uses BreadcrumbPage to indicate the current page.

With Ellipsis

Use BreadcrumbEllipsis to collapse intermediate levels in deep hierarchies.

Installation

npx visor add breadcrumb

This copies two files into your project:

components/ui/breadcrumb/breadcrumb.tsx — the component
components/ui/breadcrumb/breadcrumb.module.css — the styles

Usage

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

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

API Reference

BreadcrumbProps

No props data available for “breadcrumb”.

Sub-components

Component	Purpose
`Breadcrumb`	Root `<nav>` element with `aria-label="breadcrumb"`
`BreadcrumbList`	Ordered list container with flex layout and wrapping
`BreadcrumbItem`	List item wrapper for a single breadcrumb entry
`BreadcrumbLink`	Clickable link for navigable breadcrumb levels
`BreadcrumbPage`	Non-interactive span for the current page with `aria-current="page"`
`BreadcrumbSeparator`	Visual divider between items, defaults to a caret icon
`BreadcrumbEllipsis`	Dots indicator for collapsed intermediate levels

Accessibility

Renders a <nav> element with aria-label="breadcrumb" for landmark navigation.
The current page is marked with aria-current="page" and rendered as non-interactive.
Separators are hidden from the accessibility tree with aria-hidden="true".

Breadcrumb

On this page