Breadcrumb

Ubicación en la jerarquía. El último ítem es la página actual. Con maxItems, las rutas largas colapsan en … (menú con los niveles ocultos).

Preview principal

BREADCRUMBslash

último = página actual · aria-current=page

Ruta larga

maxItems colapsa el medio en …; el menú recupera los niveles ocultos.

maxItems=47 niveles

Ajustes del tenant

Inicio › … › Facturación › Ajustes del tenant

Profundidad

Sin maxItems cuando la ruta cabe.

DEPTH

3 niveles

4 niveles

Uso

import { Breadcrumb } from "devsoftec-ui";

<Breadcrumb
  items={[
    { label: "Inicio", href: "/" },
    { label: "Organización", href: "/org" },
    { label: "Espacios", href: "/org/spaces" },
    { label: "Proyecto", href: "/org/spaces/p" },
    { label: "Facturación" },
  ]}
  maxItems={4}
/>

Props

Prop	Tipo	Default	Descripción
`items`	`{ label, href? }[]`	—	Niveles; sin `href` = texto
`separator`	`slash` \| `dot`	`slash`	Chevron o punto
`maxItems`	`number`	—	Tope visible; el medio pasa a `…` (mín. útil: 3)
`aria-label`	`string`	`Migas de pan`	Etiqueta del `<nav>`

Comportamiento

Último ítem: aria-current="page" (no enlace)
maxItems: Inicio › … › Padre › Actual — el botón … abre los niveles ocultos
Etiquetas largas: ellipsis CSS (title con el texto completo)
Contenedor a max-width: 100% para layouts estrechos