Todos los componentes (204)

Migas

Navegación · Breadcrumbs · .amset-crumbs

Qué es y cuándo usarlo

La ruta desde la portada hasta la pantalla en la que estás: «Inicio › Catálogo › Anillos › Anillo Aurelia». Todas las migas son enlaces menos la última, que es donde estás.

Cuándo usarlo

En pantallas que cuelgan de otras (la ficha de un producto dentro de una categoría, una factura dentro de un cliente), para subir a cualquier nivel de un salto.
Con onNavigate cuando la navegación la lleva el enrutador del proyecto: se llama con la key de la miga pulsada en lugar de seguir el href (el clic del navegador se cancela). Con Ctrl, Cmd, Mayúsculas o Alt, o con el botón central, la miga se abre en otra pestaña o ventana y onNavigate no se llama. Por eso las migas llevan href también con enrutador: sin él no se pueden abrir aparte ni copiar. Si la aplicación ya registra su enrutador en la raíz con el proveedor de enrutado de la biblioteca, las migas navegan con él y onNavigate sobra.
renderCrumb para pintar cada miga a tu manera (un icono delante); se sigue anunciando por su label.

Cuándo no

En la portada o en una pantalla de primer nivel: una miga sola no orienta a nadie.
Encima del título de una pantalla con sus acciones: PageHeader ya las pinta con su crumbs.
Para las fases de un proceso (compra, alta): eso es Steps.

Teclado: Tab recorre las migas que son enlace e Intro las sigue (con onNavigate, Intro también lo lleva el enrutador). La última no es un enlace y no coge el foco.

Accesibilidad: es un nav con nombre («Ruta de navegación», o lo que diga label), así que es un punto de referencia al que se puede saltar. La miga actual lleva aria-current="page": el lector de pantalla dice «página actual» en vez de leer un enlace más. Los separadores son iconos decorativos.

Aspecto fino: variables CSS --amset-crumbs-*: -font, -gap, -padding, -radius, -separator. El tamaño mueve el cuerpo de letra, el hueco y el separador.

Cómo se ve

<Breadcrumbs
  crumbs={[
    { key: 'inicio', label: 'Inicio', href: '/' },
    { key: 'pedidos', label: 'Pedidos', href: '/pedidos' },
    { key: 'actual', label: 'Pedido 4821' },
  ]}
/>

Props

Se importa con import { Breadcrumbs } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`crumbs`obligatoria	`readonly Crumb[]`	—
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`label`	`string`	Lo que se anuncia al llegar. Por defecto, "Ruta de navegación".
`onNavigate`	`(key: string) => void`	Para que navegue el enrutador del proyecto y no el navegador. Si se pasa, el clic normal y el Intro en una miga llaman aquí con su `key` en lugar de seguir el `href`: el clic del navegador se cancela. Con Ctrl, Cmd, Mayúsculas o Alt, o con el botón central, la miga se abre en otra pestaña o ventana y aquí no se llama. Una miga sin `href` solo avisa.
`renderCrumb`	`(crumb: Crumb, state: { readonly current: boolean; }) => ReactNode`	Pinta cada miga: un icono delante, un nombre con un distintivo. La miga sigue llamandose por su `label` para el lector de pantalla. `current` es la ultima, la pagina en la que se esta.
`size`	`"sm" \| "md" \| "lg"`	El cuerpo de letra y el hueco entre migas: xs, sm (por defecto) o base.

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

Mandos

Estas variables CSS son la forma de adaptarlo. Se declaran sobre el selector del componente, no en :root: la hoja las redeclara en la propia regla y una declaración en el mismo elemento gana siempre.

Variable	Por defecto
`--amset-crumbs-font`	`var(--amset-text-sm)`
`--amset-crumbs-gap`	`var(--amset-space-1)`
`--amset-crumbs-separator`	`0.875rem`
`--amset-crumbs-padding`	`2px 4px`
`--amset-crumbs-radius`	`var(--amset-radius-sm)`

Cómo se cambia

.amset-crumbs {
  --amset-crumbs-font: ...;
  --amset-crumbs-gap: ...;
}

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: