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.

linkAs on Breadcrumb replaces navigating crumb anchors. It applies to items and to child crumbs that omit their own linkAs. The current crumb stays a non-link. items[].linkProps is checked against this linkAs. On a child BreadcrumbItem, set linkAs on that crumb for linkProps to be checked against it. AppLink below stands for your router link.

<Breadcrumb :link-as="AppLink">
  <BreadcrumbItem href="/">Home</BreadcrumbItem>
  <BreadcrumbItem current>Settings</BreadcrumbItem>
</Breadcrumb>

<Breadcrumb
  :link-as="AppLink"
  :items="[{ href: '/', label: 'Home', linkProps: { replace: true } }]"
/>
<Breadcrumb linkAs={AppLink}>
  <BreadcrumbItem href="/">Home</BreadcrumbItem>
  <BreadcrumbItem current>Settings</BreadcrumbItem>
</Breadcrumb>

<Breadcrumb
  linkAs={AppLink}
  items={[{ href: "/", label: "Home", linkProps: { replace: true } }]}
/>

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, Stepper

API

Prop Type Default Description
children ReactNode — Compound crumbs (BreadcrumbItem). Wins over items. Use the default slot in Vue.
classes BreadcrumbClasses — Classes for root, list, separator.
customProps BreadcrumbCustomProps — Extra props for root, list, and separator Icon.
items BreadcrumbItemData[] — Data-driven crumbs when not using children. Each entry can set linkProps, checked against this linkAs.
linkAs ElementType — Default component for navigating crumb anchors. Vue also accepts a string tag. Applies to items and to child crumbs that omit their own linkAs. The current crumb stays a non-link.
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.
slots BreadcrumbSlots — React: separator. Vue: separator slot (plus default for children).
Prop Type Default Description
as "a" \| "span" \| "button" inferred Element for the interactive crumb.
children ReactNode — Crumb label. Use the default slot in Vue.
classes BreadcrumbItemClasses — Classes for item parts.
current boolean false Marks the current page; non-interactive.
customProps BreadcrumbItemCustomProps — Extra props for root, link, current, icons, separator.
disabled boolean false Non-interactive crumb.
endIcon IconSource — Icon at the inline end.
href string — Link target when rendered as an anchor. When linkAs is set, this also accepts that component’s href.
linkAs ElementType — Component rendered in place of the navigating crumb anchor. Vue also accepts a string tag. Wins over linkAs on the parent. Ignored when current, disabled, or as="button" / as="span".
linkProps props of linkAs — Props forwarded to linkAs. Set linkAs on this crumb for the check to use this component.
slots BreadcrumbItemSlots — start, end, separator (Vue also uses the default slot).
startIcon IconSource — Icon at the inline start.