Breadcrumb - Sabo

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

Renders a clickable link for intermediate items.

Renders the current page (non-clickable, aria-current="page").

Visual separator between items (e.g., / or >).

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.

​When to use

​Usage

​Key parts

​Styling tip

​Accessibility

When to use

Usage

Key parts

Styling tip

Accessibility