Breadcrumb

<Breadcrumb>TailwindCSS Modules

Breadcrumbs show where a page sits within a hierarchy and provide a direct path back to its ancestors. Coloxo UI breadcrumbs combine lightweight links, chevron separators, flexible labels, and a clearly identified current page.

InstallationColoxo CLI

npx coloxo add breadcrumb --style coloxo-css

ES Module ImportPlayground / npm package

import { Breadcrumb } from '@coloxo/ui';

Design Tokens:

--cx-color-text-tertiary--cx-color-text-brand-secondary--cx-color-fg-quaternary--cx-text-smfocus: 2px ring + 2px offset

1. State Matrix

Ancestor links support hover and keyboard focus. The current page is rendered as text and marked for assistive technology.

State	Preview	Behavior
Default	Components Breadcrumb	Ancestor links use the tertiary text color.
Hover	Components Breadcrumb	Brand text and an underline highlight links.
Focus	Components Breadcrumb	A visible ring identifies keyboard focus.
Current page	Breadcrumb	The final item is current by default and is not a link.

2. Hierarchy

Start with the broadest destination and end with the current page. Items without an href render as text.

Standard trail

Nested hierarchy

3. Icons & Labels

Labels accept React nodes. Pair decorative icons with visible text so destinations remain easy to understand.

Leading home icon

4. Interactive Props Configurator

Hierarchy depth

Leading icon

Link ancestors

Explicit current page

Visual Render Canvas3 LEVELS

tsx

1<Breadcrumb2  items={[3    { label: "Home", href: "/" },4    { label: "Components", href: "/components" },5    { label: "Breadcrumb" },6  ]}7/>

5. Dark theme

Semantic tokens adapt ancestor links, separators, current-page text, and focus rings to dark surfaces.

Standard trail

Keyboard focus

6. Enterprise layout compositions

Place a breadcrumb above the page heading to establish context before showing actions or detailed content.

Workspace members

Manage the people who have access to your workspace.

Alex MorganOwner

Sam TaylorMember

Project assets

Shared files and resources for your next release.

Brand assets

Product images

Accessibility

Navigation Landmark

A nav landmark labeled "Breadcrumb" contains an ordered list that preserves the hierarchy for screen readers.

Current Page

The current item uses aria-current="page" and renders as text. Chevron separators are hidden from assistive technology.

Keyboard Navigation

Tab moves through ancestor links and Enter follows the focused link. Each link has a visible keyboard focus ring.

Props

Name	Type	Default	Description
items	BreadcrumbItem[]	—	Ordered list of ancestor destinations and the current page.
className	string	—	Additional CSS class applied to the navigation element.

BreadcrumbItem

Name	Type	Default	Description
label	ReactNode	—	Visible destination label, including optional icons.
href	string	—	Link destination. Items without a destination render as text.
current	boolean	true for the last item	Marks the current page and renders its label as text, even when href is provided.