componentes / breadcrumb

Breadcrumb

Muestra dónde está la página actual en la jerarquía, con un enlace de vuelta a cada nivel.

Cómo usar

Un `nav` con una lista ordenada de `BreadcrumbItem`s. Da `href` a los items anteriores y marca el último como `current` (pasa a ser texto con `aria-current="page"`). Para usar un enlace de router, pásalo como hijo con `asChild`. Usa `maxItems` para colapsar rutas largas tras un botón de puntos suspensivos y `separator` para cambiar el divisor.

preview

Breadcrumb.tsx

import { Breadcrumb, BreadcrumbItem } from "vaiperui";
 
<Breadcrumb>
  <BreadcrumbItem href="/">Dashboard</BreadcrumbItem>
  <BreadcrumbItem href="/settings">Ajustes</BreadcrumbItem>
  <BreadcrumbItem current>Perfil</BreadcrumbItem>
</Breadcrumb>
 
// con un enlace de router
<BreadcrumbItem asChild>
  <Link href="/settings">Ajustes</Link>
</BreadcrumbItem>

Separador

preview

›

→

separador.tsx

<Breadcrumb separator="›">…</Breadcrumb>
<Breadcrumb separator="→">…</Breadcrumb>

Colapsado

preview

maxItems={3}

colapsado.tsx

<Breadcrumb maxItems={3}>
  <BreadcrumbItem href="/">Home</BreadcrumbItem>
  <BreadcrumbItem href="/a">A</BreadcrumbItem>
  <BreadcrumbItem href="/b">B</BreadcrumbItem>
  <BreadcrumbItem href="/c">C</BreadcrumbItem>
  <BreadcrumbItem current>D</BreadcrumbItem>
</Breadcrumb>

Tamaños

preview

tamanos.tsx

<Breadcrumb size="sm">…</Breadcrumb>
<Breadcrumb size="md">…</Breadcrumb>
<Breadcrumb size="lg">…</Breadcrumb>

Color personalizado

preview

Naranja

Violeta

color-personalizado.tsx

<Breadcrumb customColor="#f97316">…</Breadcrumb>

Props

Prop	Valores	Predeterminado	Descripción
separator	ReactNode	/	Dibujado entre los items, oculto para lectores de pantalla
maxItems	number	ninguno	Colapsa rutas mayores en primer item, puntos suspensivos y los últimos maxItems - 1
expandLabel	string	Show hidden items	Nombre accesible del botón de puntos suspensivos
aria-label	string	Breadcrumb	Nombre de la navegación
variantColor / customColor	ControlColors \| CustomColor	primary	Color del anillo de foco (y del hover del enlace con customColor)
size	sm \| md \| lg	md	Tamaño del texto
BreadcrumbItem: href, current, asChild	string, boolean, boolean	ninguno	Destino del enlace; marca la página actual; usa el elemento hijo como enlace

Accesibilidad

Renderiza un `<nav>` con `aria-label` (por defecto "Breadcrumb") que envuelve una lista ordenada (`<ol>`/`<li>`).
`BreadcrumbItem current` renderiza un `<span>` con `aria-current="page"` en lugar de un enlace.
Los separadores son `aria-hidden`, así que los lectores de pantalla no los anuncian.
Los ítems con `href` son enlaces reales; un ítem sin `href` es texto simple, no enfocable.
Con `maxItems`, el medio oculto se convierte en un botón con la etiqueta `expandLabel` que muestra todos los ítems.

Teclado

Tecla	Acción
Tab	Recorre los enlaces y el botón de expandir en orden.
Enter	Sigue el enlace enfocado; Enter o Espacio activa el botón de expandir.

Ten en cuenta

Traduce `expandLabel` y `aria-label`; sus valores por defecto están en inglés.
Marca el último ítem con `current`; el componente no deduce la página actual.