Breadcrumb

Shows the current page's place in the site hierarchy. Collapse long trails with an ellipsis.

tsx

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/registry/seam/ui/breadcrumb"

export default function BreadcrumbDemo() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Components</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  )
}

bunx --bun @seamui/cli@latest add breadcrumb

Notes

Renders a labelled <nav>; the current page uses BreadcrumbPage with aria-current="page".
BreadcrumbLink renders an <a> by default — pass render to swap in a framework Link.

Press feedback, reduced motion, and haptics follow the global policy — see Motion and Haptics.