Component

Breadcrumb

Use actual links for ancestors and BreadcrumbPage for the current location.

Preview

Installation

Packages are unreleased. Follow the packed artifact setup for package mode, or run the local CLI in copy mode and complete the reported npm, token CSS, and Tailwind setup.

pnpm exec ui add breadcrumb

Full installation guide

Usage

This example uses package mode. In copy mode, import the generated component from your project and complete the manual setup steps in the installation guide.

import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator } from '@nimjs/ui';

export function Example() {
  return (
    <Breadcrumb><BreadcrumbList><BreadcrumbItem><BreadcrumbLink href="/">Home</BreadcrumbLink></BreadcrumbItem><BreadcrumbSeparator /><BreadcrumbItem><BreadcrumbPage>Settings</BreadcrumbPage></BreadcrumbItem></BreadcrumbList></Breadcrumb>
  );
}

System metadata

Registry

breadcrumb

Category: navigation

Status: preview

Version marker: 0.0.0 (unreleased)

Files

breadcrumb.tsx

Tokens

foregroundmuted-foregroundring

Dependencies

utilstokens

Copy-mode npm packages

clsxtailwind-merge

Accessibility

focus visiblekeyboard accessiblenative semanticsscreen reader readable

Anatomy

Breadcrumb

Breadcrumb part of the breadcrumb component.

BreadcrumbList

BreadcrumbList part of the breadcrumb component.

BreadcrumbItem

BreadcrumbItem part of the breadcrumb component.

BreadcrumbLink

BreadcrumbLink part of the breadcrumb component.

BreadcrumbPage

BreadcrumbPage part of the breadcrumb component.

BreadcrumbSeparator

BreadcrumbSeparator part of the breadcrumb component.

Usage patterns

basic use

Mark the current page with BreadcrumbPage.

API and states

Use actual links for ancestors and BreadcrumbPage for the current location.

Accessibility

A named nav contains an ordered list; the current page exposes aria-current="page".