Navegación

Burger

El botón de menú de tres líneas que se convierte en un ícono de cerrar.

import { Burger } from '@alea/ui';

Ejemplos

Hamburguesa

Se convierte en un ícono de cerrar e informa aria-expanded.

Configuraciones

Cada valor de cada propiedad, lado a lado. Los números coinciden con la leyenda.

isOpen false

isOpen true

Sizesize
Abrir

Estados

Cada estado de interacción, forzado para compararlos, en ambos temas.

Oscuro

Habilitado

Hover

Foco

Presionado

Claro

Habilitado

Hover

Foco

Presionado

Anatomía

Las partes del componente y la clase que da estilo a cada una.

Medidas

Medido del componente renderizado a 2x: alto, ancho, padding, radio e icono.

Cada tamaño y espacio es múltiplo de 4 px.

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-surface-hover…
--alea-text…

Radius

--alea-radius-full…

Motion

--alea-motion-duration-base…
--alea-motion-duration-fast…
--alea-motion-ease-out…

Props

`Burger` props

El botón de menú de tres líneas que se transforma en un ícono de cerrar.

Prop	Tipo	Por defecto	Descripción
`isOpen`obligatoria	`boolean`	-	Si el menú que controla está abierto.
`onChange`obligatoria	`(open: boolean) => void`	-	Se llama con el nuevo estado abierto.
`aria-controls`	`string`	-	El id del menú que abre.
`aria-label`	`string`	-	Nombre. Por defecto "Menú".
`className`	`string`	-	Clases extra para el elemento raíz.
`size`	`"sm" \| "md"`	`'md'`	sm (32 px) o md (40 px, por defecto).

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.

Variantes: sizesmmd
Estados: Hover (CSS)Open
Motion: press morph
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-burger
Atributos data: data-size=sm

Un botón con aria-expanded y aria-controls apuntando al menú.

Teclado

Tecla	Acción
`Enter` o `Espacio`	Abre o cierra el menú

Qué hacer y qué evitar

Hacer

Apunta aria-controls al menú que abre.
Muestra la navegación completa en pantallas anchas.

Evitar

No escondas navegación importante detrás de él en escritorio.
No lo uses para nada que no sea mostrar navegación.