Navigation Menu
Un componente de navegación de nivel superior con sub-menús desplegables accesibles.
Vista previa
Este ejemplo usa estilos solo para documentación. En producción, utiliza una de las recetas incluidas (CSS, Tailwind o UnoCSS).
Un componente de navegación de nivel superior con sub-menús desplegables accesibles.
Uso
Compón Root, List, Item, Trigger, Content, Link.
import * as NavigationMenu from "@solidiom/navigation-menu"
;<NavigationMenu.Root>Contenido de Navigation Menu</NavigationMenu.Root>Instalación
Instala el paquete con pnpm add @solidiom/navigation-menu. El paquete requiere dependencias pares compatibles de solid-js y @solidjs/web.
Partes
Navigation Menu expone 6 partes:
- Root —
data-part="root". - List —
data-part="list". - Item —
data-part="item". - Trigger —
data-part="trigger". - Content —
data-part="content". - Link —
data-part="link".
Estilos
Navigation Menu lleva los atributos data-scope="navigation-menu" y data-part en cada parte para la selección CSS/receta. Los atributos de estado como data-state, data-disabled y data-highlighted se exponen donde corresponda.
Interacción con teclado
| Tecla | Comportamiento |
|---|---|
| ArrowDown | Abre el contenido desplegable cuando el foco está en un disparador. |
| Escape | Cierra el contenido desplegable. |
| Tab | Mueve el foco al siguiente elemento enfocable en la navegación. |
Composición
Navigation Menu está diseñado para componerse con otras primitivas. Sus partes pueden combinarse con Field, Button u otras primitivas según sea necesario.
Renderizado SSR e hidratación
Navigation Menu se renderiza como HTML semántico durante el renderizado en servidor. El comportamiento interactivo (manejadores de teclado, gestión de estado) se activa en la hidratación sin desplazamiento de diseño.