Breadcrumbs

Breadcrumbs are a navigation aid that shows the user's current location within a site hierarchy. They help users understand where they are and navigate back to parent pages.

Basic Usage

import { Breadcrumbs } from '@/components'

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

Divider Styles

Breadcrumbs support three different divider styles: arrow (default), slash, and dot.

Arrow (default)

Slash

Dot

Arrow (Default)

<Breadcrumbs items={items} divider="arrow" />

Slash

<Breadcrumbs items={items} divider="slash" />

Dot

<Breadcrumbs items={items} divider="dot" />

Variants

Default

Plain text breadcrumbs without background styling.

<Breadcrumbs items={items} variant="default" />

Badge

Pill-shaped breadcrumbs with a subtle background and border.

<Breadcrumbs items={items} variant="badge" />

Default

Badge

With Icons

Each breadcrumb item can include an optional icon.

Default with icons

Badge with icons

import { Home, Folder, EmptyPage } from 'iconoir-react'

<Breadcrumbs
  items={[
    { label: 'Home', href: '/', icon: <Home className="size-[18px]" /> },
    { label: 'Documents', href: '/documents', icon: <Folder className="size-[18px]" /> },
    { label: 'Report.pdf', icon: <EmptyPage className="size-[18px]" /> }
  ]}
/>

Long Paths

Breadcrumbs handle long navigation paths gracefully.

<Breadcrumbs
  items={[
    { label: 'Home', href: '/' },
    { label: 'Products', href: '/products' },
    { label: 'Electronics', href: '/products/electronics' },
    { label: 'Computers', href: '/products/electronics/computers' },
    { label: 'Laptops' }
  ]}
/>

Badge Variant with All Dividers

Badge with arrow

Badge with slash

Badge with dot

Accessibility

  • Uses semantic <nav> element with aria-label="Breadcrumb"
  • Current page is marked with aria-current="page"
  • Dividers are hidden from screen readers with aria-hidden="true"
  • Items with href render as links, the last item renders as text

API Reference

Breadcrumbs Props

PropTypeDefaultDescription
itemsBreadcrumbItem[]RequiredArray of breadcrumb items
variant"default" | "badge""default"Visual style variant
divider"arrow" | "slash" | "dot""arrow"Divider style between items
classNamestring-Additional CSS classes

BreadcrumbItem Type

interface BreadcrumbItem {
  label: string       // Display text
  href?: string       // Link URL (renders as <a> if provided, except for last item)
  icon?: ReactNode    // Optional icon
}