Command Palette

Search for a command to run...

Breadcrumb

shadcn/ui

Displays the path to the current resource using a hierarchy of links.

import {	Breadcrumb,	BreadcrumbList,	BreadcrumbItem,	BreadcrumbLink,	BreadcrumbPage,	BreadcrumbSeparator,} from "@/registry/optics/breadcrumb";import Link from "next/link";<Breadcrumb>	<BreadcrumbList>		<BreadcrumbItem>			<BreadcrumbLink asChild>				<Link href="/">Home</Link>			</BreadcrumbLink>		</BreadcrumbItem>		<BreadcrumbSeparator />		<BreadcrumbItem>			<BreadcrumbLink asChild>				<Link href="/components">Components</Link>			</BreadcrumbLink>		</BreadcrumbItem>		<BreadcrumbSeparator />		<BreadcrumbItem>			<BreadcrumbPage>Breadcrumb</BreadcrumbPage>		</BreadcrumbItem>	</BreadcrumbList></Breadcrumb>

Installation

pnpm dlx shadcn@latest add https://optics.agusmayol.com.ar/r/breadcrumb.json

Props

The Breadcrumb component is composed of several sub-components that work together to create a navigation breadcrumb trail.

<Breadcrumb />
Name
Type
No specific props. Accepts standard HTML nav attributes.

<BreadcrumbList />
Name
Type
className
string
<BreadcrumbItem />
Name
Type
className
string
<BreadcrumbLink />
Name
Type
asChild
boolean
className
string
<BreadcrumbPage />
Name
Type
className
string
<BreadcrumbSeparator />
Name
Type
className
string
children
React.ReactNode
<BreadcrumbEllipsis />
Name
Type
className
string
BadgeButton