Breadcrumb

A navigation trail of composable parts — nav, list, item, link, page and separator — with a data-driven composite for simple trails

Installation

$npx litefy@latest add breadcrumb
$pnpm dlx litefy@latest add breadcrumb
$yarn dlx litefy@latest add breadcrumb
$bun --bun litefy@latest add breadcrumb

Usage

Data-driven

For simple trails, the composite Breadcrumb renders items in order — the last entry becomes the current page, the rest render as links:

"use client";
import { Breadcrumb } from "@/ui";

export default function BreadcrumbDataDemo() {
  return (
    <div className="p-4">
      <Breadcrumb
        items={[
          { label: "Home", href: "#" },
          { label: "Project", href: "#" },
          { label: "Current Page" },
        ]}
      />
    </div>
  );
}

Parts composition

Every layer is exported as a part — compose them freely for full control over items, icons and separators:

"use client";
import {
  BreadcrumbRoot,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/ui";

export default function BreadcrumbBasicDemo() {
  return (
    <BreadcrumbRoot>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink>Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink>Project</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Current Page</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </BreadcrumbRoot>
  );
}

API Reference

Prop	Type	Default	Description
`items`	`BreadcrumbDataItem[]`	-	Trail entries in hierarchy order; the last renders as page
`className`	`ClassNameValue`	-	Custom class names, applied to the root `<nav>`
`style`	`React.CSSProperties`	-	Inline styles, applied to the root `<nav>`
`classNames`	`list` / `link` / `page` / `separator`	-	Custom class names per slot
`styles`	`list` / `link` / `page` / `separator`	-	Custom styles per slot
`...props`	`React.ComponentProps<"nav">`	-	Native nav props, spread onto the root

BreadcrumbDataItem

Field	Type	Default	Description
`label`	`React.ReactNode`	-	Entry text
`href`	`string`	-	Link target; entries with it render as links

Composable Components

The parts extend native DOM props and merge their built-in className through cn — passing className extends the defaults instead of replacing them.

BreadcrumbRoot

The outer <nav aria-label="breadcrumb"> container.

Prop	Type	Default	Description
`className`	`ClassNameValue`	-	Custom class names
`...props`	`React.ComponentProps<"nav">`	-	Native nav props

BreadcrumbList

The inner <ol>, flex layout with wrapping.

Prop	Type	Default	Description
`className`	`ClassNameValue`	-	Custom class names
`...props`	`React.ComponentProps<"ol">`	-	Native ol props

BreadcrumbItem

A single <li> entry container.

Prop	Type	Default	Description
`className`	`ClassNameValue`	-	Custom class names
`...props`	`React.ComponentProps<"li">`	-	Native li props

BreadcrumbLink

A clickable trail link (a real <a>).

Prop	Type	Default	Description
`className`	`ClassNameValue`	-	Custom class names
`...props`	`React.ComponentProps<"a">`	-	Native a props

BreadcrumbPage

The current page text (not clickable, aria-current="page").

Prop	Type	Default	Description
`className`	`ClassNameValue`	-	Custom class names
`...props`	`React.ComponentProps<"span">`	-	Native span props

BreadcrumbSeparator

The separator, rendering a ChevronRight icon by default — replace via children.

Prop	Type	Default	Description
`className`	`ClassNameValue`	-	Custom class names
`children`	`React.ReactNode`	-	Custom separator content
`...props`	`React.ComponentProps<"li">`	-	Native li props

On this page