Breadcrumb
Location trail. 2 separators × 2 lengths.
import { Breadcrumb } from "@/components/ui/breadcrumb";
export default function Example() {
return <Breadcrumb items={[{ label: "Shop", href: "#shop" }, { label: "Tea", href: "#tea" }, { label: "Sylhet green" }]} />;
}
Installation
$ npx uix-ui@latest add breadcrumbThis copies the file into components/ui/breadcrumb.tsx in your project. npx shadcn@latest add @uix/breadcrumb works too.
Usage
import { Breadcrumb } from "@/components/ui/breadcrumb";
<Breadcrumb items={[{ label: "Shop", href: "#shop" }, { label: "Tea", href: "#tea" }, { label: "Sylhet green" }]} />
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | BreadcrumbItem[] | – | |
separator | "chevron" | "slash" | "chevron" | |
showHome | boolean | false | Home icon before the first item. |
Everything else is passed to the root element, so className, aria-* and event handlers work as usual.
Dependencies
Installed for you by the CLI.
class-variance-authorityclsxtailwind-merge
lib/utils.tscomponents/ui/icons.tsx