Skip to main content
Breadcrumb component preview (light)
  • Location: sabo/src/components/ui/breadcrumb.tsx

​
When to use

  • Show users where they are within a hierarchy; provide quick back navigation.
  • Use for multi-level navigation (e.g., Home > Category > Product).

​
Usage

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

export function Example() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem><BreadcrumbLink href="/">Home</BreadcrumbLink></BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem><BreadcrumbLink href="/dashboard">Dashboard</BreadcrumbLink></BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem><BreadcrumbPage>Settings</BreadcrumbPage></BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  );
}

​
Key parts

​
BreadcrumbLink
Renders a clickable link for intermediate items.
​
BreadcrumbPage
Renders the current page (non-clickable, aria-current="page").
​
BreadcrumbSeparator
Visual separator between items (e.g., / or >).
​
BreadcrumbEllipsis
Collapsed items indicator for long trails; includes a screen‑reader label.

​
Styling tip

Use concise labels and consider collapsing middle segments on small screens. 
<BreadcrumbList className="text-sm">...</BreadcrumbList>

​
Accessibility

  • BreadcrumbList is a <nav> with aria-label="breadcrumb".
  • BreadcrumbPage has aria-current="page" for the current location.
  • Screen readers announce the full trail; keep labels descriptive.