breadcrumb

Installation

Import Breadcrumb primitives from `@/components/kamod-ui/breadcrumb`.

pnpm add @kamod-ch/ui

import { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "@/components/kamod-ui/breadcrumb";

Usage

Compose BreadcrumbList with BreadcrumbItem cells: BreadcrumbLink for ancestors, BreadcrumbPage for the active segment, BreadcrumbSeparator between items.

import { Breadcrumb } from "@/components/kamod-ui/breadcrumb";

<Breadcrumb />

Custom separator

Pass any node as children of BreadcrumbSeparator (for example a dot icon).

Dropdown

Place a Dropdown in a BreadcrumbItem to expose sibling routes without cluttering the trail.

Collapsed

BreadcrumbEllipsis marks omitted intermediate segments; pair with a dropdown on the hero example for an interactive menu.

Link component

Use BreadcrumbLink asChild so your framework Link or anchor receives breadcrumb styles and data-slot.

API Reference

Props overview for each part.

Root nav landmark; pass dir for RTL.

Prop	Type	Default
class	`string`	`-`

BreadcrumbList

Prop	Type	Default
class	`string`	`-`

BreadcrumbItem

Prop	Type	Default
class	`string`	`-`

BreadcrumbLink

Use asChild to wrap your router Link or <a>.

Prop	Type	Default
asChild	`boolean`	`false`
href	`string`	`-`
class	`string`	`-`

BreadcrumbPage

Current page; renders with aria-current and aria-disabled.

Prop	Type	Default
class	`string`	`-`

BreadcrumbSeparator

Optional children override the default chevron.

Prop	Type	Default
class	`string`	`-`

BreadcrumbEllipsis

Prop	Type	Default
class	`string`	`-`

Accessibility Notes

Use Breadcrumb with clear labels, keyboard-friendly interactions and semantic structure.