# Breadcrumb

> Dónde estoy en la jerarquía del sitio: `<nav>` + `<ol>`, con el medio colapsable en «…».

```tsx
import { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, … } from "sebs7n-ui/breadcrumb"
```

Sin `"use client"`: sirve en un Server Component.

## Ejemplos

### Una página de detalle

Los separadores los pone `BreadcrumbList`. El último nivel no es link: lleva `aria-current="page"`.

```tsx
import Link from "next/link"
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage } from "sebs7n-ui/breadcrumb"

function Basico() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink render={<Link href="/docs" />}>Inicio</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbItem>
          <BreadcrumbLink render={<Link href="/docs/components/table" />}>Clientes</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbItem>
          <BreadcrumbPage>Acme S.A.</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  )
}
```

### Muchos niveles: colapsar el medio

`maxItems={4}` deja el primero, un «…» con nombre accesible y los dos últimos.

```tsx
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage } from "sebs7n-ui/breadcrumb"

function Colapsado() {
  return (
    <Breadcrumb>
      <BreadcrumbList maxItems={4}>
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Inicio</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Clientes</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Acme S.A.</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Facturas</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbItem>
          <BreadcrumbPage>0012</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  )
}
```

### Dentro de un PageHeader

Acá va `BreadcrumbList` **suelto**: el `<nav>` ya lo pone la prop `breadcrumb`.

```tsx
import { BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage } from "sebs7n-ui/breadcrumb"
import { PageHeader, PageHeaderTitle } from "sebs7n-ui/page-header"
import { SlashIcon } from "lucide-react"

function EnPageHeader() {
  return (
    <PageHeader
      breadcrumb={
        <BreadcrumbList separator={<SlashIcon />}>
          <BreadcrumbItem>
            <BreadcrumbLink href="#">Facturas</BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbItem>
            <BreadcrumbPage>0012</BreadcrumbPage>
          </BreadcrumbItem>
        </BreadcrumbList>
      }
    >
      <PageHeaderTitle>Factura 0012</PageHeaderTitle>
    </PageHeader>
  )
}
```

## Props

### Breadcrumb

Hereda las props de `<nav>`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `aria-label` | `string` | `"Migas de pan"` | Nombre accesible del elemento. |
| `className` | `string` | — | Se fusiona con las clases del componente vía `cn()` (tailwind-merge): lo que pongas gana. |

### BreadcrumbEllipsis

Hereda las props de `<li>`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `label` | `string` | `"Rutas intermedias"` | Nombre accesible: el «…» en sí es decoración. |
| `className` | `string` | — | Se fusiona con las clases del componente vía `cn()` (tailwind-merge): lo que pongas gana. |

### BreadcrumbItem

Hereda las props de `<li>`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `className` | `string` | — | Se fusiona con las clases del componente vía `cn()` (tailwind-merge): lo que pongas gana. |

### BreadcrumbLink

Hereda las props de `<a>`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `render` | `RenderElement` | — | El elemento que se renderiza en lugar del `<a>`: `render={<Link href="/x" />}`. Clona el elemento del llamador —no es el `render` de Base UI— así que sigue siendo un `<a>`. |
| `className` | `string` | — | Se fusiona con las clases del componente vía `cn()` (tailwind-merge): lo que pongas gana. |

### BreadcrumbList

Hereda las props de `<ol>`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `ellipsisLabel` | `string` | `"Rutas intermedias"` | Nombre accesible del «…». |
| `itemsAfter` | `number` | `2` | Cuántos ítems quedan después del «…». El último es la página actual. |
| `itemsBefore` | `number` | `1` | Cuántos ítems quedan antes del «…». |
| `maxItems` | `number` | — | A partir de cuántos ítems se colapsa el medio. Sin valor, no colapsa nunca. El «…» además tiene que tapar **dos o más** ítems, así que con `maxItems={4}` el colapso arranca recién en el quinto nivel. |
| `separator` | `React.ReactNode` | — | Reemplaza el chevron. Es decoración: va `aria-hidden`. |
| `className` | `string` | — | Se fusiona con las clases del componente vía `cn()` (tailwind-merge): lo que pongas gana. |

### BreadcrumbPage

Hereda las props de `<span>`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `className` | `string` | — | Se fusiona con las clases del componente vía `cn()` (tailwind-merge): lo que pongas gana. |

### BreadcrumbSeparator

Hereda las props de `<li>`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `className` | `string` | — | Se fusiona con las clases del componente vía `cn()` (tailwind-merge): lo que pongas gana. |

## Teclado

| Tecla | Qué hace |
|---|---|
| Tab | Recorre los links. El último nivel no es link, así que no entra al orden de tabulación. |
| Enter | Navega. |

## Accesibilidad

- Es un `<nav aria-label="Migas de pan">` con un `<ol>` adentro: el orden de los niveles es información, no estilo.
- El separador es un `<li role="presentation" aria-hidden="true">`: el lector lee «Inicio, Clientes, 0012», no «Inicio barra Clientes».
- El último nivel lleva `aria-current="page"` y **no** es un link: no se navega a donde ya estás.
- El «…» del colapso tiene nombre accesible (`ellipsisLabel`); el carácter en sí es `aria-hidden`.
- Sin `"use client"`: los `<a>` salen en el HTML del server, que es lo que ve un crawler.

## Reglas de uso

- **Dentro de `PageHeader` va `BreadcrumbList` suelto**, sin `Breadcrumb`: el `<nav>` ya lo pone la prop `breadcrumb`, y dos landmarks anidados confunden. Si igual lo envolvés, `PageHeader` avisa por consola en desarrollo.
- **Los separadores los pone `BreadcrumbList`**, no el llamador. Para cambiarlos, `separator={<SlashIcon />}`.
- **No inventes otro estilo de link**: usa `linkVariants({ variant: "subtle" })`, el mismo de cualquier link suelto del sistema.
- Con Next, `render={<Link href="/clientes" />}`: sigue siendo un `<a>`, se abre en una pestaña nueva y el crawler lo ve.
- De cuatro niveles para arriba, `maxItems={4}`. En mobile un breadcrumb de seis niveles ocupa tres líneas.
- No es un reemplazo del botón «Volver» del navegador ni de la navegación principal: es contexto.

## Relacionados

[page-header](/docs/components/page-header.md) · [navigation-menu](/docs/components/navigation-menu.md) · [pagination](/docs/components/pagination.md)