Todos los componentes (204)

Menú de navegación

Navegación · NavigationMenu · .amset-navmenu

Qué es y cuándo usarlo

La navegación principal de un sitio: enlaces directos y botones que despliegan un panel con más enlaces («Productos», «El taller»), con su descripción si hace falta.

Cuándo usarlo

En la cabecera de un sitio o una tienda con secciones que tienen varias páginas dentro.
Cuando conviene explicar adónde lleva cada enlace con una frase.

Cuándo no

Para acciones que no cambian de página: es una Menubar o un ActionMenu.
Para la navegación lateral de una aplicación: es SideNav.
Con pocas secciones sin nada dentro: bastan los enlaces.

Teclado: es la navegación con despliegues de ARIA, no un menú: son enlaces de verdad dentro de un <nav>. Cada panel va justo después de su botón, así que Tab entra en él y sigue el orden de la pantalla; la flecha abajo sobre un botón abierto entra en su panel. Escape cierra devolviendo el foco, y salir con Tab o pulsar fuera lo cierra.

Accesibilidad: los botones llevan aria-expanded y aria-controls, la página actual lleva aria-current="page" y un botón apagado no se alcanza con el teclado. Con el ratón se abre al pasar por encima (con una pausa) y pulsar el botón lo fija, que es lo que funciona en una pantalla táctil.

Enrutador: con onNavigate (o el de RouterProvider) los enlaces internos navegan sin recargar; el clic con Ctrl, el central y los de otro sitio se abren como siempre.

Aspecto fino: variable CSS --amset-navmenu-panel-width (ancho del panel; nunca más que la pantalla).

Cómo se ve

Pasa el ratón por «Productos» o llega con el tabulador.

<NavigationMenu
  label="Principal"
  items={[
    { key: "inicio", label: "Inicio", href: "/", current: true },
    { key: "productos", label: "Productos", links: [{ key: "anillos", label: "Anillos", href: "/anillos" }] },
  ]}
  onNavigate={(href) => router.push(href)}
/>

Props

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

Prop	Tipo	Para qué sirve
`items`obligatoria	`readonly NavigationMenuItem[]`	—
`label`obligatoria	`string`	Qué navegación es, para el lector de pantalla: «Principal».
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`closeDelay`	`number`	Milisegundos de gracia al salir: es lo que deja cruzar del botón al panel.
`offset`	`number`	—
`onNavigate`	`(href: string) => void`	Si se pasa, los enlaces internos llaman a esto en vez de recargar la página.
`openDelay`	`number`	Milisegundos con el ratón encima antes de abrir. Con otro panel ya abierto, el cambio es inmediato.

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-navmenu-panel-width`	`min(36rem, calc(100vw - 2rem))`

Cómo se cambia

.amset-navmenu {
  --amset-navmenu-panel-width: ...;
}

En el banco de pruebas

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