Context Menu primitive
Headless Context Menu: the behavior, keyboard support and ARIA of the WAI-ARIA Menu pattern, with no styles.
@ndop/primitives/context-menu- WAI-ARIA: Menu
Import
Primitives ship in the @ndop/primitives package and have no styles. Their state is on data attributes for you to style. The styled Context Menu is built on this one.
import { NdContextMenuTrigger } from '@ndop/primitives/context-menu';Accessibility
Implements the Menu pattern of the WAI-ARIA Authoring Practices.
Keyboard
Keys the component handles.
| Key | Action |
|---|---|
| ShiftF10 | On the focused area, opens the menu and focuses its first item. |
Focus
- Opening focuses the menu; closing returns focus to the area.
Right-to-left
Submenus follow Menu's RTL behavior.
API reference
NdContextMenuTrigger
[ndContextMenuTrigger]from @ndop/primitives/context-menuAn area with its own menu, composing CdkContextMenuTrigger: its value
is the ng-template of the menu. A right click or long press opens the
menu at the pointer; Shift + F10 or the context-menu key opens it at the
area's corner and focuses its first item. The menu's parts are
@ndop/primitives/menu's. Make the area focusable and named, and offer
its actions elsewhere too.
| NdContextMenuTrigger binding | Type | Default |
|---|---|---|
[ndContextMenuTrigger]The ng-template of the menu it opens. | TemplateRef<unknown> | null | null |
[disabled]Leaves the browser's own context menu. | boolean | false |
| Data attribute | Values |
|---|---|
data-state | — |
data-disabled | — |