Components
Breadcrumb
A compact path indicator for nested screens, docs sections, and drill-in navigation.
Loading...
Installation
Install the registry item directly, then add any package dependencies if you are setting the component up manually.
1
Install the component
Run the registry command below to add breadcrumb to your project.
watermelon add breadcrumb2
Import the component
Import Breadcrumb from your local UI registry output.
Import
import { Breadcrumb } from "@/components/ui/breadcrumb";Import
Import
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";Usage
Use breadcrumbs to show where the current screen lives inside a larger flow.
Loading...
API Reference
| prop | type | default | description |
|---|---|---|---|
| children | ReactNode | - | Compose links, separators, and the current page. |