Breadcrumb

Installation

npx vayu-ui init    # Add Theme CSS if not added

npx vayu-ui add breadcrumb

npx vayu-ui add -t breadcrumb    # with test case needs

Usage

Basic

Custom Separator

Collapsed

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

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

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

Anatomy

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

Accessibility

Breadcrumb renders a <nav> with aria-label="breadcrumb" for landmark identification
BreadcrumbList uses a semantic <ol> element to convey item ordering
BreadcrumbLink provides a visible focus ring (focus-visible:ring-2) and meets WCAG 2.2 AA minimum target size (24x24px) via py-2 padding
BreadcrumbPage sets aria-current="page" to indicate the current location
BreadcrumbSeparator is hidden from assistive technology via role="presentation" and aria-hidden="true"
BreadcrumbEllipsis is hidden from assistive technology via role="presentation" and aria-hidden="true"
All interactive elements (links) are keyboard-navigable using standard Tab key behavior

A screen reader announces the breadcrumb navigation landmark and reads each link in order:

"breadcrumb navigation, list, 3 items, Home link, Components link, Breadcrumb current page"

The separator between items is not announced. The final item is identified as the current page via aria-current="page", so the user knows their location within the hierarchy.

Component Folder Structure

Breadcrumb/
├── Breadcrumb.tsx
├── BreadcrumbEllipsis.tsx
├── BreadCrumbItem.tsx
├── BreadCrumbLink.tsx
├── BreadCrumbList.tsx
├── BreadCrumbPage.tsx
├── BreadCrumbSeparator.tsx
├── index.ts
├── types.ts
└── README.md

Props

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

Extends React.ComponentPropsWithoutRef<"nav">.

BreadcrumbList

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

Extends React.OlHTMLAttributes<HTMLOListElement>.

BreadcrumbItem

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

Extends React.LiHTMLAttributes<HTMLLIElement>.

BreadcrumbLink

Prop	Type	Default	Description
`href`	`string`	-	Link destination
`className`	`string`	-	Additional CSS classes
`children`	`ReactNode`	-	Link content

Extends LinkProps from next/link.

BreadcrumbPage

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes
`children`	`ReactNode`	-	Current page text

Extends React.HTMLAttributes<HTMLSpanElement>.

BreadcrumbSeparator

Prop	Type	Default	Description
`children`	`ReactNode`	`<ChevronRight />`	Custom separator icon or text
`className`	`string`	-	Additional CSS classes

Extends React.LiHTMLAttributes<HTMLLIElement>.

BreadcrumbEllipsis

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

Extends React.HTMLAttributes<HTMLSpanElement>.

Breadcrumb

Breadcrumb Example

Basic

Custom Separator

Collapsed

On this page