Breadcrumb

In the app

Where you are in the topbar. Links are muted, the current page is ink and medium, chevrons are the low grey.

@varick/ui/components/breadcrumbAdded 2 Sept 2026

Usage

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

export function Example() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem><BreadcrumbLink href="/agents">Agents</BreadcrumbLink></BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem><BreadcrumbPage>Renewal manager</BreadcrumbPage></BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  );
}

API reference

Every component also accepts className and the native props of its root element.

Prop	Type	Default	Description
BreadcrumbLink	ComponentProps<'a'>		Muted, ink on hover. Wrap a router Link if you have one.
BreadcrumbPage	ComponentProps<'span'>		The current page, aria-current="page".
BreadcrumbSeparator.children	ReactNode	chevron	Swap the glyph.

Accessibility

<nav aria-label="Breadcrumb"> around an ordered list; separators are aria-hidden.

Styles

The CSS as it appears in the app. The live component above is the same values as Tailwind classes.

.breadcrumb-list { display: flex; align-items: center; gap: 7px; list-style: none; font-size: 13.5px; }
.breadcrumb-link { color: var(--fg-mid); text-decoration: none; transition: color 140ms var(--ease-out); }
.breadcrumb-link:hover { color: var(--fg-high); }
.breadcrumb-sep { color: var(--fg-low); }
.breadcrumb-page { font-weight: 500; color: var(--fg-high); }