Skip to content

Breadcrumb

Navigation

Shows the current location within a hierarchy and links back to its ancestors.

React · copy into your project · light and dark themes

Try it

Loading preview…

Take it with you

Copy the example, API and usage notes for your editor or AI assistant.

Add to your project

Terminal

npx shadcn@latest add https://luv-jeri.github.io/cojeev-ui/r/breadcrumb.json

The command includes the component’s shared dependencies. Your project keeps editable source files.

Using breadcrumb

Compose BreadcrumbList with linked ancestors and a final BreadcrumbPage.
Use asChild on BreadcrumbLink to integrate a router link, and wire BreadcrumbBack when a separate back action is useful.

API

Compose the exported parts below. The prop types are read from the React source during the registry build.

Native element or underlying primitive props are inherited where declared, including accessible labels, event handlers and refs.

BreadcrumbProps

Accepts the native or primitive props declared by its exported TypeScript type.

BreadcrumbListProps

Accepts the native or primitive props declared by its exported TypeScript type.

BreadcrumbItemProps

Accepts the native or primitive props declared by its exported TypeScript type.

BreadcrumbLinkProps

Prop	Type	Required
`asChild`	`boolean`	No

BreadcrumbPageProps

Accepts the native or primitive props declared by its exported TypeScript type.

BreadcrumbSeparatorProps

Accepts the native or primitive props declared by its exported TypeScript type.

BreadcrumbEllipsisProps

Accepts the native or primitive props declared by its exported TypeScript type.

BreadcrumbBackProps

Accepts the native or primitive props declared by its exported TypeScript type.

Accessibility

BreadcrumbPage marks the current page and decorative separators are hidden from assistive technology; keep ancestor link names descriptive.

States and appearance

resthoverfocusactiveselected

For conditional content, keep a MotionPresence boundary around keyed MotionSurface children. The shared entrance and exit states work with native primitives and respect your motion preference.

Try pointer and keyboard interaction, and switch the appearance control in the navigation to compare light and dark mode. Motion respects reduced motion preferences.