Navigation Menu
Una colección de enlaces para navegar por sitios web, con soporte para menús desplegables.
Uso
Características
- Navegación por teclado con las flechas y Escape
- Accesible, con los atributos ARIA correctos
- Animaciones y transiciones suaves
- Disposiciones de contenido flexibles (una o varias columnas)
- Soporte para enlaces directos y menús desplegables
Referencia de la API
VoltNavigationMenuContentItem — volt-navigation-menu-content-item
| Entrada | Tipo | Por defecto |
|---|---|---|
| disabled | boolean | false |
VoltNavigationMenuContent — volt-navigation-menu-content
| Entrada | Tipo | Por defecto |
|---|---|---|
| orientation | 'vertical' | 'horizontal' | 'vertical' |
| wrap | boolean | false |
VoltNavigationMenuItem — volt-navigation-menu-item
| Entrada | Tipo | Por defecto |
|---|---|---|
| value | string | — |
VoltNavigationMenuLink — a[voltNavigationMenuLink]
| Entrada | Tipo | Por defecto |
|---|---|---|
| active | boolean | false |
| disabled | boolean | false |
VoltNavigationMenuList — volt-navigation-menu-list
| Entrada | Tipo | Por defecto |
|---|---|---|
| wrap | boolean | false |
VoltNavigationMenuTrigger — volt-navigation-menu-trigger
| Entrada | Tipo | Por defecto |
|---|---|---|
| content * | NgpOverlayContent<unknown> | — |
| placement | NavigationMenuPlacement | 'bottom-start' |
| offset | number | 4 |
| flip | boolean | true |
| disabled | boolean | false |
| cooldown | number | 300 |
VoltNavigationMenu — volt-navigation-menu
| Entrada | Tipo | Por defecto |
|---|---|---|
| orientation | 'horizontal' | 'vertical' | 'horizontal' |
| showDelay | number | 200 |
| hideDelay | number | 150 |
| value | string | null | null |
| Salida | Tipo |
|---|---|
| valueChange | string | null |
Código del componente
Instalar por CLI:
npx @voltui/cli add navigation-menuTypeScript
Cargando el editor…
Copia este código en tu proyecto. El componente usa ng-primitives/navigation-menu.