CngxMenu

DirectivePrimaryv0.1.0WCAG AA

projects/common/interactive/menu/menu.directive.ts

Import#

import { CngxMenu } from '@cngx/common/interactive'

Description#

Navigable menu container with WAI-ARIA role="menu" semantics.

Uses CngxActiveDescendant as a hostDirective so items rendered with CngxMenuItem (or its sub-roles) are tracked automatically. No selection state - menus fire actions through the itemActivated output.

https://cngxjs.github.io/cngx/examples/#/common/interactive/context-menu/right-click-target-zone https://cngxjs.github.io/cngx/examples/#/common/interactive/menu/submenu/two-level-submenu https://cngxjs.github.io/cngx/examples/#/common/interactive/menu/trigger/dropdown-menu https://cngxjs.github.io/cngx/examples/#/common/interactive/menu/base/action-menu-with-separator

Metadata#

Selector: [cngxMenu]
Export as: cngxMenu
Host directives: CngxActiveDescendant
inputs orientation loop typeahead autoHighlightFirst
Implements: CngxMenuHost

Host#

Static attributes: rolemenu
tabindex0
[attr.aria-label]label()

Providers#

CNGX_MENU_HOST: useExisting CngxMenu

Dependencies#

CngxActiveDescendantinject()selfhostad

Underlying CngxActiveDescendant - exposed for trigger composition.

Relationships

Used by1

componentCngxBreadcrumbOverflowDrop-in overflow menu for {@link CngxBreadcrumbBar}.

Depends on1

CNGX_MENU_HOSTservice

Index#

Inputs#

label#string

input()Required

Accessible label.

Instance Properties#

itemActivated#unknown

Readonly

Emits the activated item's value on Enter/Space/click.

outputFromObservable(
  outputToObservable(this.ad.activated).pipe(takeUntilDestroyed()),
)

submenuItems#CngxMenuSubmenuLike

contentChildren()Readonly

Submenu directives registered inside this menu's content tree. Empty when the menu has no submenus. Drives the trigger's focus-stack arrow-right / arrow-left semantics.

contentChildren<CngxMenuSubmenuLike>(CNGX_MENU_SUBMENU_ITEM, {
  descendants: true,
})

Methods#

focus#void

Move DOM focus to the menu container so its host CngxActiveDescendant receives keyboard input. Consumers (notably CngxContextMenuTrigger) call this after open to transfer focus from the trigger zone into the menu. The host element MUST carry a non-negative tabindex for focus to land - the menu's stories use tabindex="0" and consumers should mirror that.

preventScroll: true keeps the popover anchored when focusing into a menu that lives outside the visual viewport edge.

HostBindings#

Binding	Expression
`[attr.aria-label]`	`label()`