Discovery

Breadcrumbs

An accessible breadcrumb trail. The last crumb is marked as the current page; pass href on the rest to make them links. Swap the separator with any node.

navigation

breadcrumb

accessible

Preview

Installation

Run the shadcn CLI. Dependencies and the shared lib block come with it.

npx shadcn add breadcrumbs

Usage

Import

import { Breadcrumbs } from "@/components/lumo/breadcrumbs"

Example

<Breadcrumbs
  items={[
    { label: "Home", href: "/" },
    { label: "Lighting", href: "/lighting" },
    { label: "Aurora Lamp" },
  ]}
/>

Props

Prop	Type	Default	Required
items	Crumb[]	-	Required
separator	ReactNode	-

All props accept standard HTML attributes unless otherwise specified.

Dependencies

npm packages

lucide-react

Own every line

Lumo blocks copy into your repo. No runtime dependency, no lock-in. Edit the code to fit your product.

View on GitHub Read the docs