Breadcrumb

Show navigation hierarchy for current page

Source Code

Installation


pnpm dlx radianui@latest add breadcrumb

Usage

Imports

/components/ui/breadcrumb.tsx

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

Code

/components/ui/breadcrumb.tsx

<Breadcrumb>
	<BreadcrumbList>
		<BreadcrumbItem>
			<BreadcrumbLink asChild>
				<Link href="/">Home</Link>
			</BreadcrumbLink>
		</BreadcrumbItem>
 
		<BreadcrumbSeparator />
 
		<BreadcrumbItem>
			<BreadcrumbEllipsis />
		</BreadcrumbItem>
 
		<BreadcrumbSeparator />
 
		<BreadcrumbItem>
			<BreadcrumbLink asChild>
				<Link href="/docs/components">Components</Link>
			</BreadcrumbLink>
		</BreadcrumbItem>
	</BreadcrumbList>
</Breadcrumb>

Examples

With Icons

Card Design

With Dot

With Slash

Props

Name	Default	Values
asChild	false	boolean