Breadcrumb

Trail of ancestors, with a collapse point for paths too deep to spell out.

Source: 1 file
Dependencies: none
Playground: no

Examples

Every variant of the shipped component, live. Switch the layout to read them as a table or one at a time, and open Code for the file behind them.

01Basic

<Breadcrumb><BreadcrumbList>…

02With icon

<BreadcrumbLink><HomeIcon />…

03Collapsed

<BreadcrumbEllipsis />

04Custom separator

<BreadcrumbSeparator>/</BreadcrumbSeparator>

05Truncated

<BreadcrumbLink className="max-w-28 truncate" />

06Responsive

<BreadcrumbItem className="hidden @md:inline-flex" />

Installation

One package for the whole library — run this once and every component on this site is importable. Adding the tokens to your stylesheet is the other half; the installation guide covers it.

npm install kipui

import {
  Breadcrumb, BreadcrumbList, BreadcrumbItem,
  BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator,
} from "kipui";

Peer dependencies

react 19

react-dom 19

tailwindcss 4

Bundled dependencies

None beyond the peers above.

Usage

breadcrumb-example.tsx

import {
  Breadcrumb, BreadcrumbList, BreadcrumbItem,
  BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator,
} from "kipui";

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

The last crumb is a `BreadcrumbPage`, not a link — it announces via `aria-current` and isn't clickable.
`BreadcrumbEllipsis` stands in for the middle of a long trail.

API reference

Transcribed from the component's own types. Props with no default are required.

Prop	Default	Description
hrefstring	required	Required. Passed straight through to whatever `as` renders.
asElementType	"a"	Your router's link component. The default anchor navigates everywhere but full-page-reloads inside a SPA; pass `as={Link}` for client-side navigation.