Preview

Installation

<> import.ts
import { Breadcrumbs } from "@/components/ui/breadcrumbs"

Code

<> component.tsx
import { Breadcrumbs } from "@/components/ui/breadcrumbs"

<Breadcrumbs />

API Reference

Breadcrumbs

A navigation component that indicates the current page’s location within a hierarchy.

<> import.ts
import { Breadcrumbs, BreadcrumbPresets } from "@/components/ui/breadcrumbs"

Props

PropTypeDefaultDescription
items
Array<{ label: string; href?: string; icon?: React.ReactNode }>—Breadcrumb trail items in order
separator
React.ReactNode—Custom separator element between items
className
string""Additional CSS classes
showHome
booleantruePrepends a Home item at the start
homeIcon
React.ReactNode—Custom icon for the Home item
onItemClick
(item: {label: string; href?: string; icon?: React.ReactNode}, index: number) => void—Called when a non-last, clickable item is clicked

Examples

Example 1
<> example.tsx
// Basic
<Breadcrumbs items={[{ label: 'Home', href: '/' }, { label: 'Library', href: '/library' }, { label: 'Data' }]} />
Example 2
<> example.tsx
// Custom separator
<Breadcrumbs
  items={[{ label: 'Home', href: '/' }, { label: 'Settings' }]}
  separator={<span className="mx-1">/</span>}
/>
Example 3
<> example.tsx
// Without Home
<Breadcrumbs showHome={false} items={[{ label: 'Docs', href: '/docs' }, { label: 'Components' }]} />
Example 4
<> example.tsx
// Using a preset
<Breadcrumbs items={BreadcrumbPresets.ecommerce('Shoes', 'Sneakers', 'Air Runner')} />

Presets

fileSystem

Creates breadcrumbs from a path array

ecommerce

Shop > Category > Subcategory > Product trail

admin

Admin > Section > Subsection trail