Dropdown Menu primitive
Headless Dropdown Menu: the behavior, keyboard support and ARIA of the WAI-ARIA Menu Button pattern, with no styles.
@ndop/primitives/dropdown-menu- WAI-ARIA: Menu Button
Import
Primitives ship in the @ndop/primitives package and have no styles. Their state is on data attributes for you to style. The styled Dropdown Menu is built on this one.
import { NdDropdownMenuTrigger } from '@ndop/primitives/dropdown-menu';Accessibility
Implements the Menu Button pattern of the WAI-ARIA Authoring Practices.
Keyboard
Keys the component handles.
| Key | Action |
|---|---|
| EnterorSpace | Opens the menu and focuses its first item. |
| ArrowDown | Opens the menu and focuses its first item. |
| ArrowUp | Opens the menu and focuses its last item. |
Focus
- Closing the menu returns focus to the trigger.
Right-to-left
start and end sides are logical and swap in right-to-left layouts.
API reference
NdDropdownMenuTrigger
[ndDropdownMenuTrigger]from @ndop/primitives/dropdown-menuThe button of a menu button (WAI-ARIA Menu Button pattern), composing
CdkMenuTrigger: its value is the ng-template of the menu it opens.
Enter, Space and the arrow keys open the menu and focus an item; closing
returns focus here. The menu's parts are @ndop/primitives/menu's.
Manages aria-haspopup, aria-expanded, aria-controls.
| NdDropdownMenuTrigger binding | Type | Default |
|---|---|---|
[ndDropdownMenuTrigger]The ng-template of the menu it opens. | TemplateRef<unknown> | null | null |
[defaultOpen]Initial open state when open isn't bound, applied after hydration. | boolean | false |
[side]Side of the trigger the menu opens on, before flipping to fit. | 'start' | 'end' | 'bottom' | 'top' | 'bottom' |
[align]Alignment of the menu along that side. | 'start' | 'end' | 'center' | 'start' |
[sideOffset]Gap between the trigger and the menu, in pixels. | number | 4 |
[(open)]Whether the menu is open. Two-way bindable with [(open)]. | boolean | false |
| Data attribute | Values |
|---|---|
data-state | — |