Menu

Breadcrumb

Location trail. 2 separators × 2 lengths.

Installation

$ npx uix-ui@latest add breadcrumb

This copies the file into components/ui/breadcrumb.tsx in your project. npx shadcn@latest add @uix/breadcrumb works too.

Usage

breadcrumb.tsx
import { Breadcrumb } from "@/components/ui/breadcrumb";

<Breadcrumb items={[{ label: "Shop", href: "#shop" }, { label: "Tea", href: "#tea" }, { label: "Sylhet green" }]} />

Props

PropTypeDefaultDescription
itemsBreadcrumbItem[]–
separator"chevron" | "slash""chevron"
showHomebooleanfalseHome 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-authority
  • clsx
  • tailwind-merge
  • lib/utils.ts
  • components/ui/icons.tsx
esc

↑↓ to navigate · ↵ to select · esc to close