Navigation Menu
A horizontal or vertical navigation bar with dropdown content panels that appear on hover or click.
Features
- ✅ Hover intent with configurable open/close delays
- ✅ Smart positioning with auto-flip and shift
- ✅ Optional arrow pointing to trigger
- ✅ Keyboard navigation between triggers and links
- ✅ Only one content panel visible at a time
- ✅ Touch device support (click instead of hover)
- ✅ Roving tabindex for accessible trigger navigation
- ✅ Full WAI-ARIA menubar pattern
- ✅ Directional data attributes for CSS animations
Basic Usage
With Arrow
Add an arrow that points to the trigger element, just like popovers.
Custom Delays
Configure hover intent delays to control how quickly menus open and close.
Vertical Orientation
Use orientation: 'vertical' for a vertical sidebar-style navigation. The dropdown opens to the right of each trigger.
With x-model
Control the active value from outside using Alpine's x-model.
Active:
API Reference
Root Props
| Property | Type | Default | Description |
|---|---|---|---|
orientation | 'horizontal' | 'vertical' | 'horizontal' | Navigation direction |
delay | number | 50 | Hover-to-open delay in milliseconds |
closeDelay | number | 50 | Hover-to-close delay in milliseconds |
value | string | null | null | Currently active item value |
placement | Placement | 'bottom' | Dropdown position relative to trigger |
strategy | 'absolute' | 'fixed' | 'absolute' | CSS positioning strategy for the dropdown |
offset | number | 8 | Distance from trigger in pixels |
Placement Values
top,top-start,top-endbottom,bottom-start,bottom-endleft,left-start,left-endright,right-start,right-end
Parts
| Part | Description |
|---|---|
x-navigation-menu:list | Menu items wrapper (menubar role) |
x-navigation-menu:item | Individual menu entry (scope provider). Value: unique string identifier |
x-navigation-menu:trigger | Button that opens dropdown on hover/click |
x-navigation-menu:positioner | Single positioning wrapper for all content (managed by Floating UI) |
x-navigation-menu:viewport | Container inside positioner that holds all content panels |
x-navigation-menu:content | Dropdown content container (menu role). Value: unique string identifier matching an item |
x-navigation-menu:link | Navigation anchor inside content (menuitem role) |
x-navigation-menu:arrow | Optional arrow pointing to trigger (inside positioner) |
x-navigation-menu:indicator | Optional visual indicator (inside item scope) |
Scope Data ($item)
Available inside x-navigation-menu:item and its children via $item:
| Property | Type | Description |
|---|---|---|
value | string | This item's unique identifier |
triggerId | string | Generated trigger element ID |
isActive | boolean | Whether this item's dropdown is open |
hasContent | boolean | Whether this item has registered content |
open() | function | Open this item's dropdown |
close() | function | Close the dropdown immediately |
Data Attributes
| Attribute | Values | Description |
|---|---|---|
data-state | open | closed | Current open/closed state |
data-scope | navigation-menu | Identifies component scope |
data-part | Part name | Identifies component part |
data-orientation | horizontal | vertical | Navigation direction (on root and list) |
data-value | Item value | Unique item identifier (on item and trigger) |
data-activation-direction | forward | backward | none | Direction of last item switch (on content, viewport) |
Events
| Event | Detail | Description |
|---|---|---|
value-change | { value: string | null, previousValue: string | null } | Fired when active item changes |
Keyboard Interactions
| Key | Description |
|---|---|
| Arrow Right | Focus next trigger (horizontal mode) |
| Arrow Left | Focus previous trigger (horizontal mode) |
| Arrow Down | Focus next trigger (vertical) or first content link (horizontal, when open) |
| Arrow Up | Focus previous trigger (vertical mode) |
| Home | Focus first trigger |
| End | Focus last trigger |
| Enter / Space | Toggle dropdown content |
| Escape | Close dropdown and return focus to trigger |
| Tab | Move focus through content links |
Accessibility
- Follows WAI-ARIA menubar pattern
- Root has
role="navigation"witharia-label - List has
role="menubar"witharia-orientation - Triggers have
role="menuitem"witharia-expandedandaria-controls - Content has
role="menu"linked viaaria-labelledby - Links have
role="menuitem"withtabindex="-1" - Roving tabindex on triggers ensures proper Tab key behavior
- Touch devices use click interaction instead of hover