Bridge UI

Breadcrumb

Navigation trail for hierarchy with compound items or a data-driven list.

Introduction

Breadcrumb shows where the user is in a hierarchy—home → section → page. Compose with BreadcrumbItem, or pass items for a data-driven list. Supports icon crumbs, custom separators, and collapsing long trails.

When to use: Page chrome that reflects nesting (docs sections, project folders, settings trees). Prefer Link for a single destination and Tabs for switching peer views on the same level.

Use the framework selector in the site header to switch between React and Vue.

Import

import { Breadcrumb } from "@bridge-ui/vue/Components/Breadcrumb";
import { BreadcrumbItem } from "@bridge-ui/vue/Components/BreadcrumbItem";
import { Breadcrumb } from "@bridge-ui/react/Components/Breadcrumb";
import { BreadcrumbItem } from "@bridge-ui/react/Components/BreadcrumbItem";

Basic usage

Nest BreadcrumbItem children inside Breadcrumb. Mark the current page with current (renders as a non-link with aria-current="page").

From items array

Pass items when crumbs come from data. Each entry supports label, href, current, icons, and disabled. Children win if both children and items are set.

Icon only

Omit the label and set aria-label on the interactive crumb so assistive tech still has a name.

Custom separator

The default separator is chevronRight. Pass an icon via separator, or fully customize with slots.separator (React) / the separator slot (Vue).

Collapse middle crumbs

With the items API, set maxItems to keep the first crumb and the last few, inserting an ellipsis for the middle.

Sizes

Change density with size: sm, md (default), and lg.

Accessibility

  • The root renders a nav with aria-label="Breadcrumb" by default. Override with your own aria-label when needed.
  • Mark the current page with current so it gets aria-current="page" and is not a link.
  • Icon-only crumbs need an accessible name (aria-label on the crumb).
  • Prefer meaningful crumb labels over generic text like “Page” when the visible label is the only context.

Anatomy

<nav aria-label="Breadcrumb"> <!-- root -->
  <ol> <!-- list -->
    <li> <!-- BreadcrumbItem root -->
      <span> <!-- separator (icon or slot) -->
      <a|button|span> <!-- link / current -->
        <!-- startIcon / slots.start -->
        <!-- label -->
        <!-- endIcon / slots.end -->
    </li>
  </ol>
</nav>

Target Breadcrumb parts with classes: root, list, separator. Target BreadcrumbItem parts with root, link, current, startIcon, endIcon, and separator.

Link, Icon, Tabs

API

Prop Type Default Description
children ReactNode — Compound crumbs (BreadcrumbItem). Wins over items. Use the default slot in Vue.
items BreadcrumbItemData[] — Data-driven crumbs when not using children.
maxItems number — Collapse middle crumbs when the list exceeds this count (items API).
separator IconSource "chevronRight" Icon between crumbs. Override with the separator slot for custom content.
size BreadcrumbSize "md" Density of text, gaps, and icons.
classes BreadcrumbClasses — Classes for root, list, separator.
customProps BreadcrumbCustomProps — Extra props for root, list, and separator Icon.
slots BreadcrumbSlots — React: separator. Vue: separator slot (plus default for children).
Prop Type Default Description
children ReactNode — Crumb label. Use the default slot in Vue.
href string — Link target when rendered as an anchor.
current boolean false Marks the current page; non-interactive.
disabled boolean false Non-interactive crumb.
as "a" \| "span" \| "button" inferred Element for the interactive crumb.
startIcon IconSource — Icon at the inline start.
endIcon IconSource — Icon at the inline end.
classes BreadcrumbItemClasses — Classes for item parts.
customProps BreadcrumbItemCustomProps — Extra props for root, link, current, icons, separator.
slots BreadcrumbItemSlots — start, end, separator (Vue also uses the default slot).