Breadcrumb

Ruta de navegación jerárquica que muestra la ubicación actual del usuario.

---

Import

import {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbPage,
  BreadcrumbSeparator,
  BreadcrumbEllipsis,
} from '@imansi/ui';

---

Uso básico

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Inicio</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="/productos">Productos</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Detalle</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

---

Con React Router

import { Link } from 'react-router-dom';

<BreadcrumbLink asChild>
  <Link to="/productos">Productos</Link>
</BreadcrumbLink>

---

Con ellipsis

<BreadcrumbList>
  <BreadcrumbItem>
    <BreadcrumbLink href="/">Inicio</BreadcrumbLink>
  </BreadcrumbItem>
  <BreadcrumbSeparator />
  <BreadcrumbItem>
    <BreadcrumbEllipsis />
  </BreadcrumbItem>
  <BreadcrumbSeparator />
  <BreadcrumbItem>
    <BreadcrumbPage>Detalle</BreadcrumbPage>
  </BreadcrumbItem>
</BreadcrumbList>

---

Separador custom

<BreadcrumbSeparator>
  <Slash className="h-4 w-4" />
</BreadcrumbSeparator>

---

Props

Todos los subcomponentes aceptan className y props nativas. BreadcrumbLink soporta asChild para delegar el render.

---

Accesibilidad

• role="navigation" con aria-label="breadcrumb"
• aria-current="page" en BreadcrumbPage
• Navegable con teclado