build69
Sign inGet API key
build69  /  Components  /  Navigation  /  Breadcrumb

Breadcrumb

v1.0.1Updated 20 Jul 2026

Hierarchical location trail with optional ellipsis collapse for long paths. Use when a record sits three or more levels deep in the nav.

View source← Back to catalog

Preview

Live · 8 stories
DefaultOpen ↗
▸Why this is recommendedbreadcrumbnavigationtrailhierarchy+1

The default, out-of-the-box Breadcrumb.

Recommended for+14
  • ✓Detail pages nested ≥ 3 levels
  • ✓File browser path
  • ✓PageHead breadcrumb slot
Tags+6
breadcrumbnavigationtrailhierarchydefault
Features+4
  • Composable slots (Item / Link / Separator / Ellipsis / Page)
  • Dropdown ellipsis for collapsed segments
  • Custom separator icons
  • aria-current on the active page
Not recommended for−2
  • ✕Two-level pages (a back link is enough)
  • ✕Tabbed sub-views (use Tabs)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "Breadcrumb" })

Usage

import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from '@/components/navigation/breadcrumb';

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem><BreadcrumbLink href="/">Home</BreadcrumbLink></BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem><BreadcrumbPage>Invoice INV-0042</BreadcrumbPage></BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
asChild

BreadcrumbLink: render as the provided child (e.g. Next Link)

boolean—

Related

Platform docsAll componentsSource files