Breadcrumbs
NavigationA navigation aid showing the user's location in the site hierarchy. Use breadcrumbs to help users understand where they are and navigate back to parent pages.
Import
import { Breadcrumbs } from "@/components/ui/breadcrumbs";Usage
Basic Breadcrumbs
Standard breadcrumb navigation
With Home Icon
Breadcrumbs starting with a home link
Deep Hierarchy
Breadcrumbs for deeply nested pages
API Reference
items*—BreadcrumbItem[]Array of breadcrumb items with label and optional href
showHomefalsebooleanWhether to show a home link at the start
homeHref"/"stringURL for the home link
separator—ReactNodeCustom separator element between items
| Prop | Type | Default | Description |
|---|---|---|---|
items* | BreadcrumbItem[] | — | Array of breadcrumb items with label and optional href |
showHome | boolean | false | Whether to show a home link at the start |
homeHref | string | "/" | URL for the home link |
separator | ReactNode | — | Custom separator element between items |