edbnedbn/ui
Get Started
WelcomeWhy We're DifferentChoosing a VariantChangelogLicense
Components
OverviewAlert DialogCheckboxCollapsibleDialogFieldInputMenuNumber FieldPopoverProgressRadioScroll AreaSelectSeparatorSliderSwitchTabsToggleTooltip
Shared Components
InputTextareaCardAvatarTableAlertBreadcrumb
Pagination
0installs
ComponentsMaps
GitHub stars
HomeDocsComponentsSharedBreadcrumb

On this page

Breadcrumb (Shared)

Accessible breadcrumb navigation with auto separators, ellipsis overflow, and active page indicators.

  1. Home
  3. Docs
  5. Breadcrumb

Overview

Breadcrumb is a composable nav component with 7 sub-components. It uses aria-label="breadcrumb" and marks the current page with aria-current="page".

Usage

import {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/shared/breadcrumb"
<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Current</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Installation

Install via CLI

TypeScript
npx edbn-ui@latest add breadcrumb

Examples

Basic

  1. Home
  3. Documentation
  5. Components

With Ellipsis

  1. Home
  3. More
  5. Components
  7. Breadcrumb

Sub-components

Breadcrumbnav

Root nav element with aria-label='breadcrumb'

BreadcrumbListol

Ordered list with flex wrap and gap

BreadcrumbItemli

Individual breadcrumb item

BreadcrumbLinka

Clickable link with hover color transition

BreadcrumbPagespan

Current page — aria-current='page', non-clickable

BreadcrumbSeparatorli

Chevron separator (or custom children)

BreadcrumbEllipsisspan

Dots icon for collapsed breadcrumb items