Installation
Run the following command
pnpm dlx @shadext/cli add breadcrumb
API Reference
Props
| prop | type | default value |
|---|---|---|
variant | typeof buttonVariants | default |
isActive | boolean | false |
activeVariant | typeof buttonVariants | default |
orientation | "horizontal"| "vertical" | horizontal |
Accessibility
the Breadcrumb component is accessible by default, and it follows the WAI-ARIA guidelines.
Keyboard Navigation
| key | description |
|---|---|
Escape | closes BreadCrumb Popover/gets out of scope selected link |
Enter | Opens/closes BreadCrumb Popover |
ArrowDown/ArrowRight | Moves focus to the next link |
ArrowUp/ArrowLeft | Moves focus to the previous link |
Usage
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@/components/extension/breadcrumb";
import { Link } from "next/link";<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<Link href="/">Home</Link>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<Link href="/components">Components</Link>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>Breadcrumb</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>Examples
Orientation
BreadCrumb Separator
BreadCrumb Variants
By default, the Breadcrumb component uses the default variant for each item. You can change the variant by passing the variant prop to the BreadcrumbItem component.
BreadCrumb Active Item
You can indicate the active item by passing the isActive prop to the BreadcrumbItem component.
Loading...
Good to know
The variant prop is the same as the button variants from shadcn, you can
check the button
documentation for more
information.
Active BreadCrumb
Loading...
BreadCrumb Popover
This popover can be used to display the full path if it's too long to fit in the screen.