Propel

Breadcrumb

Shows the path to the current page as a trail of navigable crumbs.

Show code
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@makeplane/propel/components/breadcrumb";

export default function BasicDemo() {
  return (
    <Breadcrumb aria-label="Breadcrumb">
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="#" onClick={(event) => event.preventDefault()} label="Plane" />
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="#" onClick={(event) => event.preventDefault()} label="Projects" />
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="#" onClick={(event) => event.preventDefault()} label="Design" />
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage label="Work items" />
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  );
}

Installation

import {
  Breadcrumb,
  BreadcrumbEllipsisTrigger,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbMenuTrigger,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@makeplane/propel/components/breadcrumb";

Usage

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@makeplane/propel/components/breadcrumb";

export default function BasicDemo() {
  return (
    <Breadcrumb aria-label="Breadcrumb">
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="#" onClick={(event) => event.preventDefault()} label="Plane" />
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="#" onClick={(event) => event.preventDefault()} label="Projects" />
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="#" onClick={(event) => event.preventDefault()} label="Design" />
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage label="Work items" />
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  );
}

Examples

With icon

BreadcrumbLink and BreadcrumbPage take an optional leading icon; the crumb sizes it to 16×16, so the <Icon> needs no size.

Show code
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@makeplane/propel/components/breadcrumb";
import { Icon } from "@makeplane/propel/components/icon";
import { FileOutline, StackLayersOutline } from "@makeplane/propel/icons";

export default function WithIconDemo() {
  return (
    <Breadcrumb aria-label="Breadcrumb">
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink
            href="#"
            onClick={(event) => event.preventDefault()}
            icon={<Icon icon={StackLayersOutline} tint="secondary" />}
            label="Plane Design"
          />
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage icon={<Icon icon={FileOutline} tint="secondary" />} label="Work items" />
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  );
}

Collapsed crumbs

When the trail grows too long, collapse the middle crumbs behind an ellipsis menu that opens the hidden crumbs.

Show code
import {
  Breadcrumb,
  BreadcrumbEllipsisTrigger,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@makeplane/propel/components/breadcrumb";
import { Menu, MenuContent, MenuItem } from "@makeplane/propel/components/menu";

export default function CollapsedCrumbsDemo() {
  return (
    <Breadcrumb aria-label="Breadcrumb">
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="#" onClick={(event) => event.preventDefault()} label="Plane" />
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <Menu>
            <BreadcrumbEllipsisTrigger aria-label="Show more breadcrumbs" />
            <MenuContent sizing="auto">
              <MenuItem label="Projects" />
              <MenuItem label="Design" />
            </MenuContent>
          </Menu>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="#" onClick={(event) => event.preventDefault()} label="Components" />
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage label="Breadcrumb" />
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  );
}

A crumb whose label opens a menu to switch the current step between sibling contexts without leaving the trail. Its own chevron is the breadcrumb chevron, so no separator follows it.

Show code
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbMenuTrigger,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@makeplane/propel/components/breadcrumb";
import { Icon } from "@makeplane/propel/components/icon";
import { Menu, MenuContent, MenuItem } from "@makeplane/propel/components/menu";
import { StackLayersOutline } from "@makeplane/propel/icons";

export default function MenuCrumbDemo() {
  return (
    <Breadcrumb aria-label="Breadcrumb">
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="#" onClick={(event) => event.preventDefault()} label="Plane" />
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <Menu>
            <BreadcrumbMenuTrigger
              icon={<Icon icon={StackLayersOutline} tint="tertiary" size="md" />}
              label="Plane Design"
            />
            <MenuContent>
              <MenuItem label="Plane Web" />
              <MenuItem label="Plane Mobile" />
              <MenuItem label="Plane Server" />
            </MenuContent>
          </Menu>
        </BreadcrumbItem>
        <BreadcrumbItem>
          <BreadcrumbPage label="Components" />
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  );
}

View switcher

The menu crumb composes propel’s Menu rows, so it supports a single-select list — the active view carries selected and shows the trailing check.

Show code
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbMenuTrigger,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@makeplane/propel/components/breadcrumb";
import { Menu, MenuContent, MenuItem } from "@makeplane/propel/components/menu";

export default function ViewSwitcherDemo() {
  return (
    <Breadcrumb aria-label="Breadcrumb">
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="#" onClick={(event) => event.preventDefault()} label="Plane" />
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage label="Work items" />
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <Menu>
            <BreadcrumbMenuTrigger label="List" />
            <MenuContent>
              <MenuItem selected label="List" />
              <MenuItem label="Board" />
              <MenuItem label="Calendar" />
              <MenuItem label="Spreadsheet" />
            </MenuContent>
          </Menu>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  );
}

API Reference

Breadcrumb

Breadcrumb trail landmark: a <nav> wrapping a BreadcrumbList. Requires an aria-label (its landmark name, conventionally "Breadcrumb") — the consumer supplies it so it can be localized.

PropTypeDefaultDescription
aria-label(required)string—
renderReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>—Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a ReactElement or a function that returns the element to render.

BreadcrumbLink

A navigable crumb — an anchor styled as a hoverable pill, laying out an optional leading icon and the label. Pass render to use a router link.

PropTypeDefaultDescription
label(required)string—The crumb label.
renderReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>—Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a ReactElement or a function that returns the element to render.
iconReactNode—Leading icon before the label, e.g. <Icon icon={Layers} tint="secondary" />. Renders 16×16 — the crumb sets --node-size, so the <Icon> needs no size.

BreadcrumbPage

The current page — the last, non-navigable crumb (aria-current="page"), laying out an optional leading icon and the label.

PropTypeDefaultDescription
label(required)string—The current-page label.
renderReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>—Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a ReactElement or a function that returns the element to render.
iconReactNode—Leading icon before the label, e.g. <Icon icon={FileText} tint="secondary" />. Renders 16×16 — the crumb sets --node-size, so the <Icon> needs no size.

BreadcrumbMenuTrigger

The crumb that opens a BreadcrumbMenu.

PropTypeDefaultDescription
label(required)string—The crumb label. Required — it is the trigger's accessible name (the icon and caret are decorative).
iconReactNode—Leading icon, e.g. <Icon icon={Layers} tint="secondary" /> (renders 16×16 via the crumb's --node-size).

BreadcrumbEllipsisTrigger

The icon-only crumb standing in for collapsed crumbs — grafts Base UI's Menu.Trigger onto the styled BreadcrumbTrigger, with an ellipsis glyph by default (defaults are a components concern). Unlike BreadcrumbMenuTrigger it carries no label and no chevron indicator: a BreadcrumbSeparator follows it in the trail. Place a MenuContent of the hidden crumbs as its sibling inside a Menu.

PropTypeDefaultDescription
aria-labelstring—Defines a string value that labels the current element. Accessible name for the trigger (e.g. "Show more breadcrumbs"). Required (icon-only). @see aria-labelledby.
iconReactNodean ellipsisThe glyph shown inside the trigger.