Data display · Application UI
Breadcrumb
A compound navigation component that renders an accessible breadcrumb trail with support for links, the current page, separators, and an ellipsis for collapsed items.
Feature showcase
Installation
Features
7 examples
Default, Custom Separator, Long Path, Responsive, With Ellipsis, With Icons, With Render Prop.
API
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | - | Additional CSS classes applied to the root <nav> element. |
| ...props | React.ComponentProps<"nav"> | - | All standard HTML nav attributes are forwarded to the root element. |
Source and related
| File | Path |
|---|---|
| Component | registry/ui/breadcrumb.tsx |
| Default example | content/examples/breadcrumb/default.tsx |
| Custom Separator example | content/examples/breadcrumb/custom-separator.tsx |
| Long Path example | content/examples/breadcrumb/long-path.tsx |
| Responsive example | content/examples/breadcrumb/responsive.tsx |
| With Ellipsis example | content/examples/breadcrumb/with-ellipsis.tsx |
| With Icons example | content/examples/breadcrumb/with-icons.tsx |
| With Render Prop example | content/examples/breadcrumb/with-render-prop.tsx |