Breadcrumbs

Displays a navigation path for better context.

breadcrumbs-demo.tsx
import Link from "next/link"
import { EllipsisIcon } from "lucide-react"
 
import {
	Breadcrumb,
	BreadcrumbItem,
	BreadcrumbList,
	BreadcrumbSeparator,
} from "@/components/ui/breadcrumbs"
 
export function BreadcrumbsDemo() {
	return (
		<Breadcrumb>
			<BreadcrumbList>
				<BreadcrumbItem>
					<Link href="/">Home</Link>
				</BreadcrumbItem>
				<BreadcrumbSeparator />
				<BreadcrumbItem>
					<EllipsisIcon />
				</BreadcrumbItem>
				<BreadcrumbSeparator />
				<BreadcrumbItem>
					<Link href="/docs/components">Components</Link>
				</BreadcrumbItem>
				<BreadcrumbSeparator />
				<BreadcrumbItem active>Breadcrumbs</BreadcrumbItem>
			</BreadcrumbList>
		</Breadcrumb>
	)
}

Installation

npx shadcn@latest add https://9ui.dev/r/breadcrumbs

Usage

Imports
import {
	Breadcrumb,
	BreadcrumbItem,
	BreadcrumbList,
	BreadcrumbSeparator,
} from "@/components/ui/breadcrumbs"
Anatomy
<Breadcrumb>
	<BreadcrumbList>
		<BreadcrumbItem />
		<BreadcrumbSeparator />
	</BreadcrumbList>
</Breadcrumb>

Examples

Custom Separator

breadcrumbs-custom-separator.tsx
import Link from "next/link"
 
import {
	Breadcrumb,
	BreadcrumbItem,
	BreadcrumbList,
	BreadcrumbSeparator,
} from "@/components/ui/breadcrumbs"
 
export function BreadcrumbsCustomSeparator() {
	return (
		<Breadcrumb>
			<BreadcrumbList>
				<BreadcrumbItem>
					<Link href="/">Home</Link>
				</BreadcrumbItem>
				<BreadcrumbSeparator>
					<span>/</span>
				</BreadcrumbSeparator>
				<BreadcrumbItem>
					<Link href="/docs/components">Components</Link>
				</BreadcrumbItem>
				<BreadcrumbSeparator>
					<span>/</span>
				</BreadcrumbSeparator>
				<BreadcrumbItem active>Breadcrumbs</BreadcrumbItem>
			</BreadcrumbList>
		</Breadcrumb>
	)
}