Feature Kits

shadcn primitives and layout route breadcrumbs for dashboard shells, i18n, and detail pages.

Breadcrumbs help users orient themselves in nested apps. Feature Kits ships two layers:

ui Breadcrumb* — accessible primitives (list, links, current page, separator, ellipsis).
layout Breadcrumbs — route-derived trail for dashboard headers (compression, tooltips, copy URL, dynamic ?name= labels).

Patterns below mirror production apps (dashboard headers, settings, data tables, auth, and mobile nav).

Installation

Registry CLI

Requires a one-time components.json registry entry for @feature-kit/breadcrumb.

pnpm dlx shadcn@latest add https://feature-kits.vercel.app/r/breadcrumb.json

Namespaced: npx shadcn@latest add @feature-kit/breadcrumb

Manual installation

Monorepo consumers can depend on workspace:* packages instead of the registry CLI.

pnpm add layout ui

Dependencies

// apps/your-app/package.json
"dependencies": {
    "layout": "workspace:*"
    "ui": "workspace:*"
}

Transpile (Next.js)

// next.config.ts
transpilePackages: ["layout", "ui"]

Import

import { Breadcrumbs, BreadcrumbsSkeleton } from "layout"
import {
Breadcrumb,
BreadcrumbEllipsis,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"

Mount Breadcrumbs in a client layout with next-intl messages for breadcrumb.* keys.

Anatomy

import {
  Breadcrumb,
  BreadcrumbEllipsis,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/packages/ui/components/breadcrumb"
import { Breadcrumbs, BreadcrumbsSkeleton } from "layout"
import { compressBreadcrumbs, generateBreadcrumbs, resolveCrumbLabel } from "layout/breadcrumb"

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Current</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

{/* App shell */}
<DashboardHeader showBreadcrumbs actions={actions} />

Examples

Basic

Custom separator

With icons

Collapsed / ellipsis (deep paths)

Hidden segments open in a menu (same pattern as the layout Breadcrumbs component).

Current page

Responsive truncation (mobile)

Use cases

Route-based breadcrumbs in the dashboard shell

Mount DashboardHeader in DashboardShell — crumbs read the active pathname (bad-money / ai-chat style).

Dynamic segments (`?name=`)

Detail routes use resolveCrumbLabel so /accounts/[id] shows the account name from ?name=.

Loading skeleton

Swap in BreadcrumbsSkeleton while the entity name resolves.

Loading account name…

i18n (`[lang]` prefixes)

Pass locale so the home crumb targets /en (or your next-intl prefix).

Nested settings

Long settings paths stay readable; compression kicks in after three segments.

Data table → detail → edit

List

Detail

Edit

Auth routes (hidden)

Disable crumbs on sign-in and marketing auth layouts.

Mobile nav truncation

Use display="inline" and min-w-0 inside the sheet header.

Mobile sheet header: crumbs use min-w-0 and truncate inside the nav bar.

Live path on this page

Component API

Breadcrumb

Prop	Type	Default	Description
className	string	—	Optional nav wrapper classes.
...props	React.ComponentProps<'nav'>	—	Forwarded to the root <nav>.

BreadcrumbList

Prop	Type	Default	Description
className	string	—	List layout; default flex wrap with gap-1.5.
...props	React.ComponentProps<'ol'>	—	Ordered list of items.

BreadcrumbItem

Prop	Type	Default	Description
className	string	—	Inline flex item wrapper.
...props	React.ComponentProps<'li'>	—	Single crumb cell.

BreadcrumbLink

Prop	Type	Default	Description
asChild	boolean	false	Compose with next/link or router Link.
className	string	—	Hover styles for ancestors.
...props	React.ComponentProps<'a'>	—	Anchor props when asChild is false.

BreadcrumbPage

Prop	Type	Default	Description
className	string	—	Current page text styles.
...props	React.ComponentProps<'span'>	—	Sets aria-current="page" on the current crumb.

BreadcrumbSeparator

Prop	Type	Default	Description
children	ReactNode	—	Custom separator; defaults to ChevronRightIcon.
className	string	—	Separator spacing.
...props	React.ComponentProps<'li'>	—	role="presentation" aria-hidden.

BreadcrumbEllipsis

Prop	Type	Default	Description
className	string	—	Ellipsis control for collapsed menus.
...props	React.ComponentProps<'span'>	—	MoreHorizontal icon with sr-only "More".

`Breadcrumbs` (`layout`)

Breadcrumbs

Prop	Type	Default	Description
className	string	—	Applied to BreadcrumbList (truncate, flex-1).
locale	string	—	Locale prefix for home href (e.g. en → /en).
pathname	string	—	Override pathname for tests/docs; defaults to usePathname().
searchParams	SearchParamsLike	—	Override search params when using pathname.
display	"header" \| "inline"	header	header hides below md; inline always shows (mobile nav).

BreadcrumbsSkeleton

Prop	Type	Default	Description
className	string	—	Skeleton bar matching header crumb height.

DashboardHeader

Prop	Type	Default	Description
showBreadcrumbs	boolean	true	Set false on auth/marketing routes.
showSidebarTrigger	boolean	true	Sidebar trigger + separator.
actions	ReactNode	—	Right-side header actions (theme, user menu).
className	string	—	Shell header classes.

Route helpers (`layout/breadcrumb`)

generateBreadcrumbs

Prop	Type	Default	Description
pathname	string	—	Current pathname (leading slash).
searchParams	SearchParamsLike \| null	—	Optional query for ?name= labels.

compressBreadcrumbs

Prop	Type	Default	Description
items	Crumb[]	—	Returns visible nodes plus hidden crumbs for the ellipsis menu.

resolveCrumbLabel

Prop	Type	Default	Description
segment	string	—	URL segment.
options	{ segmentIndex, segments, searchParams? }	—	Resolves ?name= on entity segments.

Accessibility

The root Breadcrumb renders <nav aria-label="breadcrumb"> (shadcn default).
BreadcrumbPage sets aria-current="page" on the current crumb only; ancestors remain links.
Separators and ellipsis use role="presentation" and aria-hidden="true" so screen readers hear the list, not punctuation.
Icon-only home uses sr-only text; copy-URL exposes aria-label from breadcrumb.copyUrl messages.
Prefer a single breadcrumb region per page; hide the shell trail on auth with showBreadcrumbs={false}.

Breadcrumb

InstallationCopy Anchor Link

Registry CLI

Manual installation

AnatomyCopy Anchor Link

ExamplesCopy Anchor Link

BasicCopy Anchor Link

Custom separatorCopy Anchor Link

With iconsCopy Anchor Link

Collapsed / ellipsis (deep paths)Copy Anchor Link

Dropdown on ellipsisCopy Anchor Link

Current pageCopy Anchor Link

Responsive truncation (mobile)Copy Anchor Link

Use casesCopy Anchor Link

Route-based breadcrumbs in the dashboard shellCopy Anchor Link

Dynamic segments (?name=)Copy Anchor Link

Loading skeletonCopy Anchor Link

i18n ([lang] prefixes)Copy Anchor Link

Nested settingsCopy Anchor Link

Data table → detail → editCopy Anchor Link

Auth routes (hidden)Copy Anchor Link

Mobile nav truncationCopy Anchor Link

Live path on this pageCopy Anchor Link

Component APICopy Anchor Link

Breadcrumb (ui)Copy Anchor Link

Breadcrumbs (layout)Copy Anchor Link

Route helpers (layout/breadcrumb)Copy Anchor Link

AccessibilityCopy Anchor Link

RelatedCopy Anchor Link

On this page