'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Navegación
Breadcrumbs
Dónde está la página: un rastro de enlaces hasta la página actual.
import { Breadcrumbs, Breadcrumb } from '@alea/ui';
Ejemplos
Breadcrumbs
El último elemento es la página actual.
Separador personalizado
Cualquier carácter entre elementos.
Rutas largas
maxItems mantiene la primera y la última miga y pliega las del medio en un menú …; icon agrega un glifo (un ícono de inicio en la primera); size="sm" para encabezados densos.
Configuraciones
Cada valor de cada propiedad, lado a lado. Los números coinciden con la leyenda.
- Size
size
Estados
Cada estado de interacción, forzado para compararlos, en ambos temas.
Oscuro
Claro
Anatomía
Las partes del componente y la clase que da estilo a cada una.
Tokens
Los tokens de diseño que usa este componente, con su valor en el tema actual. Cambia cualquiera para darle otro estilo.
Color
--alea-text…--alea-text-faint…--alea-text-muted…
Type
--alea-font-size-sm…--alea-font-weight-medium…
Component
--alea-crumb-sep…
Props
Breadcrumbs props
Dónde está la página: una ruta de enlaces, el último es la página actual. Las rutas largas pliegan su parte media en un menú.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
maxItems | number | - | Con hijos Breadcrumb: muestra como máximo esta cantidad; los del medio se pliegan en un menú … (el primero y el último se quedan). |
separator | ReactNode | - | Carácter o ícono entre elementos. Por defecto un chevron. |
size | "sm" | "md" | - | sm (13 px) o md (14 px, por defecto). |
Breadcrumb props
Un paso de la ruta.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
childrenobligatoria | ReactNode | - | Los hijos del componente. Puede ser una función para cambiar los hijos según el estado del componente. |
href | string | - | Destino del enlace. Omítelo en la página actual. |
icon | ReactNode | - | Un ícono antes del texto (un ícono de inicio en la primera miga). |
Especificaciones
Generado desde el código: las variantes de los tipos, los estados y tokens del CSS, y los patrones de motion que aplican. Las grillas muestran el componente real en ambos temas; los números se miden en la página.
Breadcrumbs
- Variantes
sizesmmd- Estados
- HoverCurrent
- Motion
- tint
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-crumb.alea-crumb-link.alea-crumb-more.alea-breadcrumbs- Atributos data
data-separator=chevrondata-size=sm
Breadcrumb
- Estados
- HoverCurrent
- Motion
- tint
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-crumb.alea-crumb-link.alea-crumb-icon- Atributos data
data-separator=chevron
Accesibilidad
- Ponlo en un nav con aria-label="Breadcrumb"; el último elemento se marca como la página actual.
Teclado
| Tecla | Acción |
|---|---|
| Tab | Se mueve entre enlaces; la página actual no es un enlace |
Qué hacer y qué evitar
Hacer
- Empieza desde el inicio de la sección, no siempre desde la portada.
Evitar
- No lo uses para los pasos de un flujo: usa Steps.