Menu
Accessible flat commands for inline surfaces and native top-layer popups, with logical positioning, deterministic Signals and full keyboard behavior.
STANDALONE API
Import
Import only the Menu primitives used by the consuming standalone component.
import { NeuralMenu, NeuralMenuGroup, NeuralMenuItem, NeuralMenuSeparatorItem, NeuralMenuTrigger, type NeuralMenuEntry } from '@neural-ng/core/menu';
@Component({ imports: [NeuralMenu, NeuralMenuGroup, NeuralMenuTrigger] })Inline commands
Data entries support icons, badges, shortcuts, links, separators and disabled commands without becoming a navigation tree.
Category groups
Group labels organize a flat command sequence without becoming selectable items or nested navigation. Data and projected APIs share the same ARIA group semantics.
Popup trigger
The trigger directive connects directly to NeuralButton’s native button, owns ARIA, transfers focus and restores it after Escape.
Logical positions
Start and end follow document direction. The shared Overlay positioner flips or clamps when available space changes.
Projected structure
Use projected primitives when commands are clearer in the template. Data and projected sources remain deliberately exclusive.
Controlled state and dismissal
open is a Signal model. Disable close-on-select for multi-step command surfaces and close explicitly when work is complete.
Links and metadata
Use routerLink for Angular SPA navigation and href for native or external destinations. Data-driven and projected items share the complete Router options contract. Badge and shortcut remain visual metadata; command behavior still flows through itemSelect.
const items: readonly NeuralMenuEntry[] = [
{ key: 'profile', label: 'Profile', iconClass: 'nt-user', shortcut: 'Ctrl P' },
{ key: 'notifications', label: 'Notifications', badge: 4 },
{ separator: true, key: 'main-separator' },
{
key: 'docs',
label: 'Documentation',
routerLink: ['/docs', 'installation'],
queryParams: { source: 'menu' },
},
{ key: 'help', label: 'External help', href: 'https://example.com/help', target: '_blank', rel: 'noopener' },
];Unstyled and typed class slots
Semantics, keyboard behavior, structural hooks and popup positioning remain while all visual ownership moves to consumer classes.
Component boundary
Menu is a flat command list. PanelMenu owns inline hierarchy; nested flyouts belong to TieredMenu, while application navigation layouts belong to Menubar, Drawer or Sidebar patterns.
MENU
Accessibility
Native menu semantics
The collection uses menu, enabled commands use native button or anchor elements with menuitem, and dividers expose separator.
Keyboard model
Arrow Up and Down wrap through enabled items. Home and End move to edges, typing performs buffered typeahead, Enter or Space activates, and disabled actions are skipped.
Trigger and focus
The trigger receives aria-haspopup, aria-controls and synchronized aria-expanded. Arrow Down opens at the first action, Arrow Up at the last, and Escape closes with focus restoration.
Direction and motion
Logical positions follow LTR or RTL direction. Reduced-motion preferences collapse transitions without changing dismissal or focus behavior.
MENU
API
The complete public contracts of NeuralMenu, its projected primitives and popup trigger.
Menu inputs
| Name | Type | Default | Description |
|---|---|---|---|
| items | readonly NeuralMenuEntry[] | [] | Data-driven actions, separators, and category groups. |
| popup | boolean | false | Uses the native Popover top layer and trigger API. |
| open | model<boolean> | false | Controlled visibility and openChange output. |
| disabled | boolean | false | Disables opening and item activation. |
| closeOnSelect | boolean | true | Closes a popup after an enabled action. |
| menuId | string | generated | Stable aria-controls identity. |
| ariaLabel | string | null | null | Accessible name fallback. |
| ariaLabelledby | string | null | null | External accessible label reference. |
| unstyled | boolean | false | Removes NeuralNg visual classes. |
| menuClass | string | '' | Consumer root class. |
| classes | NeuralMenuClasses | {} | Typed visual slots. |
MenuItem inputs
| Name | Type | Default | Description |
|---|---|---|---|
| item | NeuralMenuAction | null | null | Complete delegated action object. |
| key | string | '' | Stable unique action key. |
| label | string | '' | Visible label and typeahead source. |
| iconClass | string | '' | Neural Icon or consumer classes. |
| badge | string | number | undefined | undefined | Trailing status value. |
| shortcut | string | '' | Shortcut hint. |
| disabled | boolean | false | Visible but inert action. |
| href | string | '' | Enabled native anchor action. |
| routerLink | NeuralMenuRouterLink | null | null | Angular SPA destination; takes precedence over href. |
| queryParams / fragment | Params | string | null | Router query and fragment state. |
| queryParamsHandling / preserveFragment | QueryParamsHandling | boolean | null / false | Angular Router URL composition options. |
| skipLocationChange / replaceUrl | boolean | false | Angular Router history behavior. |
| state | Record<string, unknown> | undefined | Router history state. |
| target / rel | string | '' | Native link attributes. |
| itemClass | string | '' | Per-action consumer class. |
MenuGroup inputs
groupNeuralMenuGroupEntry | nullnullComplete delegated group object.
keystring''Stable group identity and ARIA label ID source.
labelstring''Visible non-interactive category heading.
groupClassstring''Per-group root consumer class.
labelClassstring''Per-group heading consumer class.
listClassstring''Per-group action list consumer class.
MenuTrigger inputs
neuralMenuTriggerForNeuralMenurequiredPopup instance controlled by the trigger.
menuPositionNeuralMenuPosition'bottom-start'Logical placement with flip and clamping.
Events
openChangebooleanControlled visibility changed.
itemSelectNeuralMenuSelectEnabled action selected by pointer or keyboard.
Methods
showFor(trigger, position?, focus?)Opens, positions and focuses the popup.
toggleFor(trigger, position?)Toggles a popup for a trigger.
hide(restoreFocus?)Closes and optionally restores focus.
isTriggerOpen(trigger)Reports trigger ownership.
Typed class slots
rootlistgroupgroupLabelgroupListitemdisabledItemiconlabelmetabadgeshortcutseparatorData contract
NeuralMenuEntry is the union of a keyed action, separator, and category group. Group labels are presentation-only; all group and action keys must be stable and unique. When data and projected children coexist, data wins with a development warning.
MENU
Design tokens
Neutral, dark mode and experimental themes share the same Menu token surface.
Component tokens
--neural-menu-widthComponent inline size.
--neural-menu-max-widthComponent maximum inline size.
--neural-menu-max-heightComponent maximum block size.
--neural-menu-paddingComponent internal spacing.
--neural-menu-colorComponent foreground color.
--neural-menu-backgroundComponent background surface.
--neural-menu-borderComponent border shorthand.
--neural-menu-radiusComponent corner radius.
--neural-menu-shadowComponent box shadow.
--neural-menu-font-familyComponent font family.
--neural-menu-z-indexComponent stacking order.
--neural-menu-list-gapSpacing between list items.
--neural-menu-group-gapSpacing between group items.
--neural-menu-group-label-paddingGroup label internal spacing.
--neural-menu-group-label-colorGroup label foreground color.
--neural-menu-group-label-font-sizeGroup label font size.
--neural-menu-group-label-font-weightGroup label font weight.
--neural-menu-group-label-letter-spacingLetter spacing applied to Menu category headings.
--neural-menu-group-label-transformText transformation applied to Menu category headings.
--neural-menu-group-list-gapSpacing between group list items.
--neural-menu-item-gapSpacing between item items.
--neural-menu-item-min-heightItem minimum block size.
--neural-menu-item-paddingItem internal spacing.
--neural-menu-item-colorItem foreground color.
--neural-menu-item-backgroundItem background surface.
--neural-menu-item-color-activeActive item foreground color.
--neural-menu-item-background-activeActive item background surface.
--neural-menu-item-radiusItem corner radius.
--neural-menu-item-font-sizeItem font size.
--neural-menu-item-font-weightItem font weight.
--neural-menu-item-line-heightItem line height.
--neural-menu-item-transitionItem CSS transition.
--neural-menu-focus-ringComponent keyboard focus ring.
--neural-menu-focus-ring-offsetComponent focus ring offset.
--neural-menu-disabled-opacityDisabled opacity.
--neural-menu-icon-colorIcon foreground color.
--neural-menu-icon-sizeIcon width and height.
--neural-menu-meta-gapSpacing between meta items.
--neural-menu-meta-colorMeta foreground color.
--neural-menu-badge-min-widthBadge minimum inline size.
--neural-menu-badge-paddingBadge internal spacing.
--neural-menu-badge-colorBadge foreground color.
--neural-menu-badge-backgroundBadge background surface.
--neural-menu-badge-radiusBadge corner radius.
--neural-menu-badge-font-sizeBadge font size.
--neural-menu-shortcut-colorShortcut foreground color.
--neural-menu-shortcut-font-sizeShortcut font size.
--neural-menu-separator-marginSeparator outer spacing.
--neural-menu-separator-colorSeparator foreground color.
--neural-menu-enter-durationComponent enter animation duration.
--neural-menu-leave-durationComponent leave animation duration.
--neural-menu-enter-distanceComponent enter animation travel distance.
--neural-menu-enter-scaleComponent enter animation starting scale.
--neural-menu-easingComponent animation easing curve.