bx

Breadcrumb

Displays the path to the current resource using a hierarchy of links.

tsx 
<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbEllipsis />
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="/components">Components</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Breadcrumb — chemin hiérarchique de la page courante, en tête de contenu. Chaque segment est cliquable sauf le dernier (rendu comme BreadcrumbPage). Utiliser BreadcrumbEllipsis pour condenser un chemin trop long, optionnellement combiné avec DropdownMenu pour révéler les segments cachés.

Installation

Terminal 
$ bext ui add breadcrumb

Usage

tsx 
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@bext-stack/ui/primitives"

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem><BreadcrumbLink href="/">Home</BreadcrumbLink></BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem><BreadcrumbLink href="/components">Components</BreadcrumbLink></BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem><BreadcrumbPage>Breadcrumb</BreadcrumbPage></BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Anatomy

<Breadcrumb>
  └── <BreadcrumbList>
      ├── <BreadcrumbItem>
      │   └── <BreadcrumbLink href="/">Home</BreadcrumbLink>
      ├── <BreadcrumbSeparator />
      ├── <BreadcrumbItem>
      │   └── <BreadcrumbLink href="/docs">Docs</BreadcrumbLink>
      ├── <BreadcrumbSeparator />
      └── <BreadcrumbItem>
          └── <BreadcrumbPage>Components</BreadcrumbPage>

API Reference

Breadcrumb

Prop Type Default Description
className string — undefined
children ReactNode — Rendu comme

BreadcrumbList

Prop Type Default Description
className string — undefined
children ReactNode — Rendu comme
    . Défaut : flex flex-wrap items-center gap-1.5 text-sm text-muted-foreground.

BreadcrumbItem

Prop Type Default Description
className string — undefined
children ReactNode — Rendu comme
  • . Défaut : inline-flex items-center gap-1.5.
    		•

    BreadcrumbLink

    Prop Type Default Description
    href string — undefined
    className string — undefined
    children ReactNode — Segment cliquable. hover:text-foreground.

    BreadcrumbPage

    Prop Type Default Description
    className string — undefined
    children ReactNode — Segment courant (non cliquable). Rendu comme .

    BreadcrumbSeparator

    Prop Type Default Description
    className string — undefined
    children ReactNode — Défaut : chevron-right. Peut être remplacé par un dot, un slash, une autre icône.

    BreadcrumbEllipsis

    Prop Type Default Description
    className string — Rend un more-horizontal + un sr-only "More". À wrapper avec DropdownMenu pour révéler les segments cachés.

    Keyboard

    Key Action
    Tab Focus séquentiel sur chaque BreadcrumbLink.
    Enter Suit le lien focus.

    Accessibility

    Le <nav> racine porte aria-label="breadcrumb" — annoncé aux AT comme "breadcrumb navigation". La liste est un <ol> ordonné (ordre = hiérarchie). Le segment courant porte aria-current="page". Les séparateurs portent aria-hidden="true" pour que les AT ne les lisent pas.

    Examples

    Basic

    tsx 
    <Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem><BreadcrumbLink href="#">Home</BreadcrumbLink></BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem><BreadcrumbLink href="#">Components</BreadcrumbLink></BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem><BreadcrumbPage>Breadcrumb</BreadcrumbPage></BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

    Custom separator

    tsx 
    import { DotIcon } from "lucide-react"

<BreadcrumbSeparator>
  <DotIcon />
</BreadcrumbSeparator>

    Slash separator

    tsx 
    <BreadcrumbSeparator>/</BreadcrumbSeparator>

    Collapsed (ellipsis)

    tsx 
    <BreadcrumbItem>
  <BreadcrumbEllipsis />
</BreadcrumbItem>

    Dropdown (composed)

    tsx 
    <BreadcrumbItem>
  <DropdownMenu>
    <DropdownMenuTrigger className="flex items-center gap-1">
      Components
      <ChevronDownIcon className="h-3.5 w-3.5" />
    </DropdownMenuTrigger>
    <DropdownMenuContent align="start">
      <DropdownMenuItem>Documentation</DropdownMenuItem>
      <DropdownMenuItem>Themes</DropdownMenuItem>
      <DropdownMenuItem>GitHub</DropdownMenuItem>
    </DropdownMenuContent>
  </DropdownMenu>
</BreadcrumbItem>

    RTL (arabic)

    tsx 
    <div dir="rtl">
  <Breadcrumb>
    <BreadcrumbList>
      <BreadcrumbItem>
        <BreadcrumbLink href="/">الرئيسية</BreadcrumbLink>
      </BreadcrumbItem>
      <BreadcrumbSeparator><DotIcon /></BreadcrumbSeparator>
      <BreadcrumbItem>
        <BreadcrumbPage>مسار التنقل</BreadcrumbPage>
      </BreadcrumbItem>
    </BreadcrumbList>
  </Breadcrumb>
</div>
    Try it live Open in play

    Edit this example live in the bext playground — it compiles and runs entirely in your browser.

    src/app/page.tsx 1 file · react · runs in your browser
    The React idiom — same UI, for comparison.
    ← Badge Button →