Foundation component · Navigation

Breadcrumb

A compact location trail with composable links, separators, overflow, and icons.

Live playground

Keep location trails useful

Keep trails short; collapse intermediate locations when space is constrained.
Render router links through render so navigation remains native.

Accessibility

The root exposes a named navigation landmark and the current page is announced.
Separators are decorative and excluded from the accessibility tree.

Implementation

Semantic list markup with Base UI-powered interactive parts and replaceable icons.

import Link from "next/link";
import { Breadcrumb } from "@lenso/ui/breadcrumb";

<Breadcrumb.Root>
  <Breadcrumb.List>
    <Breadcrumb.Item>
      <Breadcrumb.Link render={<Link href="/workspace" />}>Workspace</Breadcrumb.Link>
    </Breadcrumb.Item>
    <Breadcrumb.Separator />
    <Breadcrumb.Item>
      <Breadcrumb.Page>Issues</Breadcrumb.Page>
    </Breadcrumb.Item>
  </Breadcrumb.List>
</Breadcrumb.Root>;