Getting Started
Overview
Installation
Theme
Forms
Basic Inputs
Select
Custom Inputs
Components
Navigation
Components
69
Micro Charts
Libraries
Kanban Board
Image Designer
Video Player
Visual Builder
Content Editor
Data View
Latest npm version of @ngstarter-ui/componentsWeekly npm downloads of @ngstarter-ui/components
Purchase

Menu

Menu shows a short contextual set of commands in an overlay opened from a trigger button, icon button, row, toolbar control, or right-click area.

Use it for row actions, overflow more actions, user menus, context menus, toolbar actions, and nested command groups. Menu content is rendered in an overlay and can receive trigger data.

Do not use Menu for selecting form values; use Select, Autocomplete, ColorSwitcher, Datepicker, or another dedicated control. Do not use it for persistent navigation; use Navigation, Sidebar, Sidenav, or NavList. Do not use it for long lists, tables, filters, forms, modal workflows, command palettes, or bulk action bars.

Key Features:
  • Trigger-based and right-click context menus.
  • Nested submenus for grouped commands.
  • Icons, dividers, headings, headers, and footers.
  • Lazy rendering with trigger data.

Menu Properties (ngs-menu)

PropTypeDefault
role
The ARIA role for the menu.
'menu' | 'menubar'menu
classList
Classes to be passed to the menu panel.
string''
xPosition
Position of the menu in the X axis.
'before' | 'after'after
yPosition
Position of the menu in the Y axis.
'above' | 'below'below

Menu Events (ngs-menu)

EventDescription
closedEvent emitted when the menu is closed.

Menu Trigger Properties (ngsMenuTriggerFor)

PropTypeDefault
ngsMenuTriggerFor
The menu instance to be opened by this trigger.
Menunull
ngsMenuTriggerData
Data to be passed to the menu instance.
anyundefined
ngsMenuDisabled
Whether the menu trigger is disabled.
booleanfalse
ngsMenuTriggerRestoreFocus
Whether the menu should restore focus to the trigger on close.
booleantrue

Menu Trigger Events (ngsMenuTriggerFor)

EventDescription
menuOpenedEvent emitted when the associated menu is opened.
menuClosedEvent emitted when the associated menu is closed.