Breadcrumb

import {	Breadcrumb,	BreadcrumbItem,	BreadcrumbLink,	BreadcrumbList,	BreadcrumbPage,	BreadcrumbSeparator,} from "@/components/ui/breadcrumb";
export function BreadcrumbDemo() {	return (		<Breadcrumb>			<BreadcrumbList>				<BreadcrumbItem>					<BreadcrumbLink href="#">Home</BreadcrumbLink>				</BreadcrumbItem>				<BreadcrumbSeparator />				<BreadcrumbItem>					<BreadcrumbLink href="#">Components</BreadcrumbLink>				</BreadcrumbItem>				<BreadcrumbSeparator />				<BreadcrumbItem>					<BreadcrumbPage>Breadcrumb</BreadcrumbPage>				</BreadcrumbItem>			</BreadcrumbList>		</Breadcrumb>	);}

Installation

pnpm dlx shadcn@latest add @herocn/breadcrumb

Usage

import {  Breadcrumb,  BreadcrumbItem,  BreadcrumbLink,  BreadcrumbList,  BreadcrumbPage,  BreadcrumbSeparator,} from "@/components/ui/breadcrumb"

<Breadcrumb>  <BreadcrumbList>    <BreadcrumbItem>      <BreadcrumbLink href="/">Home</BreadcrumbLink>    </BreadcrumbItem>    <BreadcrumbSeparator />    <BreadcrumbItem>      <BreadcrumbLink href="/components">Components</BreadcrumbLink>    </BreadcrumbItem>    <BreadcrumbSeparator />    <BreadcrumbItem>      <BreadcrumbPage>Breadcrumb</BreadcrumbPage>    </BreadcrumbItem>  </BreadcrumbList></Breadcrumb>

Composition

Use the following composition to build a Breadcrumb:

Breadcrumb└── BreadcrumbList    ├── BreadcrumbItem    │   └── BreadcrumbLink    ├── BreadcrumbSeparator    ├── BreadcrumbItem    │   └── BreadcrumbLink    ├── BreadcrumbSeparator    └── BreadcrumbItem        └── BreadcrumbPage

Examples

Basic

A basic breadcrumb with a home link and a components link.

import {	Breadcrumb,	BreadcrumbItem,	BreadcrumbLink,	BreadcrumbList,	BreadcrumbPage,	BreadcrumbSeparator,} from "@/components/ui/breadcrumb";
export function BreadcrumbBasic() {	return (		<Breadcrumb>			<BreadcrumbList>				<BreadcrumbItem>					<BreadcrumbLink href="#">Home</BreadcrumbLink>				</BreadcrumbItem>				<BreadcrumbSeparator />				<BreadcrumbItem>					<BreadcrumbLink href="#">Components</BreadcrumbLink>				</BreadcrumbItem>				<BreadcrumbSeparator />				<BreadcrumbItem>					<BreadcrumbPage>Breadcrumb</BreadcrumbPage>				</BreadcrumbItem>			</BreadcrumbList>		</Breadcrumb>	);}

Custom separator

Use a custom component as children for <BreadcrumbSeparator /> to create a custom separator.

import { DotIcon } from "lucide-react";
import {	Breadcrumb,	BreadcrumbItem,	BreadcrumbLink,	BreadcrumbList,	BreadcrumbPage,	BreadcrumbSeparator,} from "@/components/ui/breadcrumb";
export function BreadcrumbSeparatorDemo() {	return (		<Breadcrumb>			<BreadcrumbList>				<BreadcrumbItem>					<BreadcrumbLink href="#">Home</BreadcrumbLink>				</BreadcrumbItem>				<BreadcrumbSeparator>					<DotIcon />				</BreadcrumbSeparator>				<BreadcrumbItem>					<BreadcrumbLink href="#">Components</BreadcrumbLink>				</BreadcrumbItem>				<BreadcrumbSeparator>					<DotIcon />				</BreadcrumbSeparator>				<BreadcrumbItem>					<BreadcrumbPage>Breadcrumb</BreadcrumbPage>				</BreadcrumbItem>			</BreadcrumbList>		</Breadcrumb>	);}

You can compose <BreadcrumbItem /> with a <DropdownMenu /> to create a dropdown in the breadcrumb.

import { ChevronDownIcon, DotIcon } from "lucide-react";
import {	Breadcrumb,	BreadcrumbItem,	BreadcrumbLink,	BreadcrumbList,	BreadcrumbPage,	BreadcrumbSeparator,} from "@/components/ui/breadcrumb";import {	DropdownMenu,	DropdownMenuContent,	DropdownMenuGroup,	DropdownMenuItem,	DropdownMenuTrigger,} from "@/components/ui/dropdown-menu";
export function BreadcrumbDropdown() {	return (		<Breadcrumb>			<BreadcrumbList>				<BreadcrumbItem>					<BreadcrumbLink href="#">Home</BreadcrumbLink>				</BreadcrumbItem>				<BreadcrumbSeparator>					<DotIcon />				</BreadcrumbSeparator>				<BreadcrumbItem>					<DropdownMenu>						<DropdownMenuTrigger							render={								<button type="button" className="flex items-center gap-1" />							}						>							Components							<ChevronDownIcon className="size-4" />						</DropdownMenuTrigger>						<DropdownMenuContent align="start">							<DropdownMenuGroup>								<DropdownMenuItem>Documentation</DropdownMenuItem>								<DropdownMenuItem>Themes</DropdownMenuItem>								<DropdownMenuItem>GitHub</DropdownMenuItem>							</DropdownMenuGroup>						</DropdownMenuContent>					</DropdownMenu>				</BreadcrumbItem>				<BreadcrumbSeparator>					<DotIcon />				</BreadcrumbSeparator>				<BreadcrumbItem>					<BreadcrumbPage>Breadcrumb</BreadcrumbPage>				</BreadcrumbItem>			</BreadcrumbList>		</Breadcrumb>	);}

Collapsed

We provide a <BreadcrumbEllipsis /> component to show a collapsed state when the breadcrumb is too long.

import {	Breadcrumb,	BreadcrumbEllipsis,	BreadcrumbItem,	BreadcrumbLink,	BreadcrumbList,	BreadcrumbPage,	BreadcrumbSeparator,} from "@/components/ui/breadcrumb";
export function BreadcrumbCollapsed() {	return (		<Breadcrumb>			<BreadcrumbList>				<BreadcrumbItem>					<BreadcrumbLink href="#">Home</BreadcrumbLink>				</BreadcrumbItem>				<BreadcrumbSeparator />				<BreadcrumbItem>					<BreadcrumbEllipsis />				</BreadcrumbItem>				<BreadcrumbSeparator />				<BreadcrumbItem>					<BreadcrumbLink href="#">Components</BreadcrumbLink>				</BreadcrumbItem>				<BreadcrumbSeparator />				<BreadcrumbItem>					<BreadcrumbPage>Breadcrumb</BreadcrumbPage>				</BreadcrumbItem>			</BreadcrumbList>		</Breadcrumb>	);}

Link component

To use a custom link component, use the render prop on <BreadcrumbLink />.

import {	Breadcrumb,	BreadcrumbItem,	BreadcrumbLink,	BreadcrumbList,	BreadcrumbPage,	BreadcrumbSeparator,} from "@/components/ui/breadcrumb";
export function BreadcrumbLinkDemo() {	return (		<Breadcrumb>			<BreadcrumbList>				<BreadcrumbItem>					<BreadcrumbLink render={<a href="#link-component" />}>						Home					</BreadcrumbLink>				</BreadcrumbItem>				<BreadcrumbSeparator />				<BreadcrumbItem>					<BreadcrumbLink render={<a href="#link-component" />}>						Components					</BreadcrumbLink>				</BreadcrumbItem>				<BreadcrumbSeparator />				<BreadcrumbItem>					<BreadcrumbPage>Breadcrumb</BreadcrumbPage>				</BreadcrumbItem>			</BreadcrumbList>		</Breadcrumb>	);}

RTL

"use client";
import { ChevronDownIcon, DotIcon } from "lucide-react";
import {	type Translations,	useTranslation,} from "@/components/language-selector";import {	Breadcrumb,	BreadcrumbItem,	BreadcrumbLink,	BreadcrumbList,	BreadcrumbPage,	BreadcrumbSeparator,} from "@/components/ui/breadcrumb";import {	DropdownMenu,	DropdownMenuContent,	DropdownMenuGroup,	DropdownMenuItem,	DropdownMenuTrigger,} from "@/components/ui/dropdown-menu";
const translations: Translations = {	en: {		dir: "ltr",		values: {			home: "Home",			components: "Components",			documentation: "Documentation",			themes: "Themes",			github: "GitHub",			breadcrumb: "Breadcrumb",		},	},	ar: {		dir: "rtl",		values: {			home: "الرئيسية",			components: "المكونات",			documentation: "التوثيق",			themes: "السمات",			github: "جيت هاب",			breadcrumb: "مسار التنقل",		},	},	he: {		dir: "rtl",		values: {			home: "בית",			components: "רכיבים",			documentation: "תיעוד",			themes: "ערכות נושא",			github: "גיטהאב",			breadcrumb: "פירורי לחם",		},	},};
export function BreadcrumbRtl() {	const { dir, language, t } = useTranslation(translations, "ar");
	return (		<div lang={language} dir={dir}>			<Breadcrumb>				<BreadcrumbList>					<BreadcrumbItem>						<BreadcrumbLink render={<a href="#rtl" />}>{t.home}</BreadcrumbLink>					</BreadcrumbItem>					<BreadcrumbSeparator>						<DotIcon />					</BreadcrumbSeparator>					<BreadcrumbItem>						<DropdownMenu>							<DropdownMenuTrigger								render={									<button type="button" className="flex items-center gap-1" />								}							>								{t.components}								<ChevronDownIcon className="size-4" />							</DropdownMenuTrigger>							<DropdownMenuContent align="start">								<DropdownMenuGroup>									<DropdownMenuItem>{t.documentation}</DropdownMenuItem>									<DropdownMenuItem>{t.themes}</DropdownMenuItem>									<DropdownMenuItem>{t.github}</DropdownMenuItem>								</DropdownMenuGroup>							</DropdownMenuContent>						</DropdownMenu>					</BreadcrumbItem>					<BreadcrumbSeparator>						<DotIcon />					</BreadcrumbSeparator>					<BreadcrumbItem>						<BreadcrumbPage>{t.breadcrumb}</BreadcrumbPage>					</BreadcrumbItem>				</BreadcrumbList>			</Breadcrumb>		</div>	);}

API Reference

The Breadcrumb component is the root navigation element that wraps all breadcrumb components.

Prop	Type	Default
className	`string`	—

BreadcrumbList

The BreadcrumbList component displays the ordered list of breadcrumb items.

Prop	Type	Default
className	`string`	—

BreadcrumbItem

The BreadcrumbItem component wraps individual breadcrumb items.

Prop	Type	Default
className	`string`	—

BreadcrumbLink

The BreadcrumbLink component displays a clickable link in the breadcrumb.

Prop	Type	Default
className	`string`	—

BreadcrumbPage

The BreadcrumbPage component displays the current page in the breadcrumb (non-clickable).

Prop	Type	Default
className	`string`	—

BreadcrumbSeparator

The BreadcrumbSeparator component displays a separator between breadcrumb items. You can pass custom children to override the default separator icon.

Prop	Type	Default
children	`React.ReactNode`	—
className	`string`	—

BreadcrumbEllipsis

The BreadcrumbEllipsis component displays an ellipsis indicator for collapsed breadcrumb items.

Prop	Type	Default
className	`string`	—

See the Base UI documentation for more information on the render prop.