Breadcrumbs

Breadcrumbs provide navigation context showing the path to the current page. They support separator styles, custom icons, and click handlers.

Breadcrumbs Playground

Preview

Code

Controls

Separator:

Slash

Arrow

Show Icons:

Installation

You can add the breadcrumbs component to your project manually:

Install the following dependencies:

npm

pnpm

yarn

bun

npm install @phosphor-icons/react @react-aria/focus

Copy and paste the following code into your project.

Breadcrumbs.tsx

Breadcrumb.tsx

Loading source code...

Update the import paths to match your project setup.

Update the import aliases (e.g. @/components, @/utils) in the copied files to match your project's path configuration.

Basic Usage

A simple breadcrumb trail with links:

import { Breadcrumbs } from '@versaui/ui/components/Breadcrumbs';

<Breadcrumbs
  items={[
    { label: 'Home', href: '/' },
    { label: 'Products', href: '/products' },
    { label: 'Details' },
  ]}
/>

Separator Styles

Two separator styles are available — slash (default) and arrow:

// Slash separator (default)
<Breadcrumbs
  separator="slash"
  items={[
    { label: 'Home', href: '/' },
    { label: 'Settings' },
  ]}
/>

// Arrow separator
<Breadcrumbs
  separator="arrow"
  items={[
    { label: 'Home', href: '/' },
    { label: 'Settings' },
  ]}
/>

With Icons

Add icons to individual breadcrumb items using the icon and iconComponent props:

import { HouseIcon } from '@phosphor-icons/react';

<Breadcrumbs
  items={[
    { label: 'Home', href: '/', icon: true, iconComponent: <HouseIcon /> },
    { label: 'Products', href: '/products' },
    { label: 'Details' },
  ]}
/>

Click Handlers

Use onClick instead of href for programmatic navigation:

<Breadcrumbs
  items={[
    { label: 'Home', onClick: () => router.push('/') },
    { label: 'Current Page' },
  ]}
/>

Accessibility

Uses <nav aria-label="Breadcrumb"> for semantic navigation
Current page marked with aria-current="page"
Separator characters are hidden from screen readers via aria-hidden

Breadcrumbs Props

Prop	Type	Default	Description
`separator`	`'slash' \| 'arrow'`	`'slash'`	Visual separator between items.
`items`	`BreadcrumbItem[]`	`—`	Array of breadcrumb items.
`className`	`string`	`''`	Additional CSS classes.

BreadcrumbItem Props

Prop	Type	Default	Description
`label`	`string`	`—`	Required. Display text for the breadcrumb.
`href`	`string`	`—`	Link URL. Omit for the current (last) item.
`icon`	`boolean`	`false`	Whether to show an icon.
`iconComponent`	`ReactNode`	`—`	Custom icon element to render.
`onClick`	`() => void`	`—`	Click handler for programmatic navigation.

Install the following dependencies:

Copy and paste the following code into your project.

Update the import paths to match your project setup.

On this page