Breadcrumb
Displays an 8-bit breadcrumb component.
8-bit breadcrumb component with dropdown preview
Installation
pnpm dlx shadcn@canary add https://8bitcn.com/r/8bit-breadcrumb.json
Usage
Examples
Custom separator
Use a custom component as children for <BreadcrumbSeparator /> to create a custom separator.
8-bit breadcrumb component with custom separator preview
Dropdown
You can compose <BreadcrumbItem /> with a <DropdownMenu /> to create a dropdown in the breadcrumb.
8-bit breadcrumb component with dropdown preview
Collapsed
We provide a <BreadcrumbEllipsis /> component to show a collapsed state when the breadcrumb is too long.
8-bit breadcrumb component with collapsed state preview
Link component
To use a custom link component from your routing library, you can use the asChild prop on <BreadcrumbLink />.