patterns

Breadcrumbs

Topbar / page-header breadcrumbs. `BreadcrumbDropdown` is a chevron-button that anchors a search-as-you-type menu; `BreadcrumbTrail` auto-inserts separators between children; `BreadcrumbSep` is the bare "/" glyph.

AppShell's TopBar already renders the leading separator between the brand wordmark and the trail — do NOT emit a leading `<BreadcrumbSep />` manually inside your trail.

Install

Pull this component (and its dependencies) straight into your app via the shadcn CLI:

npx shadcn@latest add https://design.oapps.io/r/breadcrumbs.json

Or import from the workspace package:

import { BreadcrumbTrail, BreadcrumbDropdown, BreadcrumbSep, BreadcrumbItem, BreadcrumbAction } from "@8maverik8/design";

Examples

Two-level dropdown trail

Audiences

<BreadcrumbTrail>
  <BreadcrumbDropdown
    label="OAPPS" activeId="oapps"
    items={[{ id: "oapps", label: "OAPPS", href: "/" }]}
  />
  <BreadcrumbDropdown
    label="Cip" activeId="cip"
    items={[
      { id: "cip", label: "Cip", href: "/cip" },
      { id: "archi", label: "Archi", href: "/archi" },
    ]}
  />
  <span className="px-1 text-sm font-medium">Audiences</span>
</BreadcrumbTrail>

Guidelines

Wrap children in `<BreadcrumbTrail>` rather than emitting separators yourself.BreadcrumbTrail skips falsy children automatically — no ghost separators when you do conditional rendering.
Make the last segment plain text, not a dropdown.The current page is where you are; there's nothing to switch to from the leaf.