Breadcrumb

Breadcrumbs show the user’s current location within a hierarchical structure and allow navigation to parent pages.

Import


import { Breadcrumb } from "@raydenui/ui";

Usage

Basic


<Breadcrumb
  items={[
    { label: "Home", href: "/" },
    { label: "Products", href: "/products" },
    { label: "Electronics", active: true },
  ]}
/>

With Icons


<Breadcrumb
  items={[
    { label: "Home", href: "/", icon: "home" },
    { label: "Dashboard", href: "/dashboard" },
    { label: "Settings", active: true },
  ]}
/>

Separator Styles


// Chevron (default)
<Breadcrumb separator="chevron" items={[...]} />
 
// Double chevron
<Breadcrumb separator="double-chevron" items={[...]} />
 
// Slash
<Breadcrumb separator="slash" items={[...]} />

With Borders


<Breadcrumb
  hasBorders
  items={[
    { label: "Home", href: "/" },
    { label: "Products", href: "/products" },
    { label: "Electronics", active: true },
  ]}
/>

With Disabled Items


<Breadcrumb
  items={[
    { label: "Home", href: "/" },
    { label: "Archive", disabled: true },
    { label: "Current Page", active: true },
  ]}
/>

Props

Prop	Type	Default	Description
`items`	`BreadcrumbItem[]`	—	Array of breadcrumb items (required)
`separator`	`"chevron" \| "double-chevron" \| "slash"`	`"chevron"`	Separator style between items
`hasBorders`	`boolean`	`false`	Show top and bottom borders
`className`	`string`	—	Additional CSS classes

BreadcrumbItem

Prop	Type	Description
`label`	`string`	Display text (required)
`href`	`string`	Link URL (makes item a link)
`icon`	`ReactNode \| IconName`	Leading icon
`disabled`	`boolean`	Disabled state (grey text, not clickable)
`active`	`boolean`	Active/current page state (primary color)

Accessibility

Uses <nav> with aria-label="Breadcrumb"
Current page marked with aria-current="page"
Semantic list structure with <ol>
Separators marked with aria-hidden