Navigation Menu
A collection of links for navigating websites, with support for dropdown menus.
Usage
Features
- Keyboard navigation with Arrow keys and Escape
- Accessible with proper ARIA attributes
- Smooth animations and transitions
- Flexible content layouts (single column, multi-column)
- Support for direct links and dropdown menus
API Reference
VoltNavigationMenuContentItem — volt-navigation-menu-content-item
| Input | Type | Default |
|---|---|---|
| disabled | boolean | false |
VoltNavigationMenuContent — volt-navigation-menu-content
| Input | Type | Default |
|---|---|---|
| orientation | 'vertical' | 'horizontal' | 'vertical' |
| wrap | boolean | false |
VoltNavigationMenuItem — volt-navigation-menu-item
| Input | Type | Default |
|---|---|---|
| value | string | — |
VoltNavigationMenuLink — a[voltNavigationMenuLink]
| Input | Type | Default |
|---|---|---|
| active | boolean | false |
| disabled | boolean | false |
VoltNavigationMenuList — volt-navigation-menu-list
| Input | Type | Default |
|---|---|---|
| wrap | boolean | false |
VoltNavigationMenuTrigger — volt-navigation-menu-trigger
| Input | Type | Default |
|---|---|---|
| content * | NgpOverlayContent<unknown> | — |
| placement | NavigationMenuPlacement | 'bottom-start' |
| offset | number | 4 |
| flip | boolean | true |
| disabled | boolean | false |
| cooldown | number | 300 |
VoltNavigationMenu — volt-navigation-menu
| Input | Type | Default |
|---|---|---|
| orientation | 'horizontal' | 'vertical' | 'horizontal' |
| showDelay | number | 200 |
| hideDelay | number | 150 |
| value | string | null | null |
| Output | Type |
|---|---|
| valueChange | string | null |
Component Source
Install via CLI:
npx @voltui/cli add navigation-menuTypeScript
Loading editor…
Copy this code to your project. The component uses ng-primitives/navigation-menu.