@aelig/breadcrumb-builder

Breadcrumb Builder

Add

pnpm dlx shadcn@latest add @aelig/breadcrumb-builder

Builds a responsive breadcrumb trail from nested navigation items.

Preview

Usage

import { BreadcrumbBuilder } from "@/components/ui/breadcrumb-builder"

const navigationItems = [
  {
    title: "Workspace",
    items: [
      {
        label: "Projects",
        path: "/projects",
        resolvedPath: "/projects",
        children: [
          {
            label: "Settings",
            path: "settings",
            resolvedPath: "/projects/settings",
          },
        ],
      },
    ],
  },
]

export function PageBreadcrumbs() {
  return <BreadcrumbBuilder navigationItems={navigationItems} maxItems={4} />
}

Variants and options

maxItems

Controls when the middle breadcrumb items collapse.

trailEndCount

Controls how many trailing items stay visible.