Breadcrumb
A navigation component that shows the current page location within a hierarchical structure. Supports custom separators, icon labels, and automatic truncation for deep paths.
Live Preview
Interact with the breadcrumb component in real time. Adjust separator style, icons, and truncation to see changes instantly.
<Breadcrumb
items={[
{ label: "Home", href: "/" },
{ label: "Products", href: "/products" },
{ label: "Electronics", href: "/products/electronics" },
{ label: "Smartphones", href: "/products/electronics/smartphones" },
{ label: "iPhone 16 Pro" },
]}
/>Installation
Install the Aidash Components package using your preferred package manager.
$ pnpm add @aidash/componentsImport
Import the Breadcrumb component into your file.
import { Breadcrumb } from '@/components/aidash/breadcrumb';Basic Usage
The simplest way to use Breadcrumb with an array of items.
<Breadcrumb
items={[
{ label: "Home", href: "/" },
{ label: "Components", href: "/docs/components" },
{ label: "Breadcrumb" },
]}
/>Custom Separators
Override the default chevron separator with slashes, dots, arrows, or any custom ReactNode.
Chevron (default)
Slash
Dot
Arrow
1{/* Slash separator */}2<Breadcrumb3items={items}4separator={<span>/</span>}5/>6 7{/* Dot separator */}8<Breadcrumb9items={items}10separator={<span className="w-1 h-1 rounded-full bg-gray-400" />}11/>12 13{/* Arrow separator */}14<Breadcrumb15items={items}16separator={<ArrowRightIcon />}17/>With Icons
Add icons to breadcrumb items for better visual hierarchy and recognition.
1<Breadcrumb2items={[3 {4 label: "Home",5 href: "/",6 icon: <HugeiconsIcon icon={Home01Icon} size={16} />,7 },8 {9 label: "Projects",10 href: "/projects",11 icon: <HugeiconsIcon icon={Folder01Icon} size={16} />,12 },13 {14 label: "breadcrumb.tsx",15 icon: <FileIcon />,16 },17]}18/>Collapsed (maxItems)
Automatically truncate long breadcrumb trails with an ellipsis when exceeding maxItems.
Full path (5 items)
Collapsed with maxItems=3
1{/* Full path */}2<Breadcrumb3items={[4 { label: "Home", href: "/" },5 { label: "Products", href: "/products" },6 { label: "Electronics", href: "/products/electronics" },7 { label: "Smartphones", href: "/products/electronics/smartphones" },8 { label: "iPhone 16 Pro" },9]}10/>11 12{/* Collapsed — shows: Home > ... > Smartphones > iPhone 16 Pro */}13<Breadcrumb14items={[...same items]}15maxItems={3}16/>maxItems prop must be greater than 2. The first item and the last maxItems - 2 items are always shown, with an ellipsis replacing the middle items.Accessibility
Built-in accessibility features following WAI-ARIA breadcrumb pattern.
Semantic Structure
Uses a <nav> element with aria-label="Breadcrumb" wrapping an ordered list (<ol>) for proper document semantics.
Current Page Indicator
The last item automatically receives aria-current="page" to indicate the current location to assistive technologies.
Hidden Separators
Separator elements have aria-hidden="true" so screen readers skip decorative dividers and only announce the navigation items.
Non-interactive Last Item
The current page renders as a <span> instead of a link, preventing users from navigating to the page they are already on.
1<nav aria-label="Breadcrumb">2<ol className="flex items-center gap-1.5">3 <li>4 <a href="/">Home</a>5 </li>6 <li>7 <span aria-hidden="true"><!-- separator --></span>8 <a href="/products">Products</a>9 </li>10 <li>11 <span aria-hidden="true"><!-- separator --></span>12 <span aria-current="page">Current Page</span>13 </li>14</ol>15</nav>API Reference
Complete list of props accepted by Breadcrumb and BreadcrumbItem.
| Prop | Type | Default | Description |
|---|---|---|---|
| items | BreadcrumbItem[] | — | Array of breadcrumb items to display |
| separator | ReactNode | Chevron icon | Custom separator element between items |
| maxItems | number | — | Maximum items to show before collapsing with ellipsis |
| className | string | '' | Additional CSS classes for the nav element |
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | — | Text label for the breadcrumb item |
| href | string | — | Link URL. If omitted, renders as plain text |
| icon | ReactNode | — | Optional icon rendered before the label |
href are rendered as plain text. The last item is always rendered as text with aria-current="page", regardless of whether href is provided.Related
Other components that work well alongside Breadcrumb.