In-depth Guides
Angular Aria

Menu

Overview

A menu offers a list of actions or options to users, typically appearing in response to a button click or right-click. Menus support keyboard navigation with arrow keys, submenus, checkboxes, radio buttons, and disabled items.

Usage

Menus work well for presenting lists of actions or commands that users can choose from.

Use menus when:

  • Building application command menus (File, Edit, View)
  • Creating context menus (right-click actions)
  • Showing dropdown action lists
  • Implementing toolbar dropdowns
  • Organizing settings or options

Avoid menus when:

  • Building site navigation (use navigation landmarks instead)
  • Creating form selects (use the Select component)
  • Switching between content panels (use Tabs)
  • Showing collapsible content (use Accordion)

Features

  • Keyboard navigation - Arrow keys, Home/End, and character search for efficient navigation
  • Submenus - Nested menu support with automatic positioning
  • Menu types - Standalone menus, triggered menus, and menubars
  • Checkboxes and radios - Toggle and selection menu items
  • Disabled items - Soft or hard disabled states with focus management
  • Auto-close behavior - Configurable close on selection
  • RTL support - Right-to-left language navigation

Examples

Create a dropdown menu by pairing a trigger button with a menu. The trigger opens and closes the menu.

The menu automatically closes when a user selects an item or presses Escape.

Context menu

Context menus appear at the cursor position when users right-click an element.

Position the menu using the contextmenu event coordinates.

Standalone menu

A standalone menu doesn't require a trigger and remains visible in the interface.

Standalone menus work well for always-visible action lists or navigation.

Disabled menu items

Disable specific menu items using the disabled input. Control focus behavior with softDisabled.

When [softDisabled]="true", disabled items can receive focus but cannot be activated. When [softDisabled]="false", disabled items are skipped during keyboard navigation.

APIs

The container directive for menu items.

Inputs

Property Type Default Description
disabled boolean false Disables all items in the menu
wrap boolean true Whether keyboard navigation wraps at edges
softDisabled boolean true When true, disabled items are focusable but not interactive

Methods

Method Parameters Description
close none Closes the menu
focusFirstItem none Moves focus to the first menu item

A horizontal container for multiple menus.

Inputs

Property Type Default Description
disabled boolean false Disables the entire menubar
wrap boolean true Whether keyboard navigation wraps at edges
softDisabled boolean true When true, disabled items are focusable but not interactive

An individual item within a menu.

Inputs

Property Type Default Description
value any — Required. Value for this item
disabled boolean false Disables this menu item
submenu Menu — Reference to a submenu
searchTerm string '' Search term for typeahead (supports two-way binding)

Signals

Property Type Description
active Signal<boolean> Whether the item currently has focus
expanded Signal<boolean> Whether the submenu is expanded
hasPopup Signal<boolean> Whether the item has an associated submenu

NOTE: MenuItem does not expose public methods. Use the submenu input to associate submenus with menu items.

A button or element that opens a menu.

Inputs

Property Type Default Description
menu Menu — Required. The menu to trigger
disabled boolean false Disables the trigger
softDisabled boolean true When true, disabled trigger is focusable

Signals

Property Type Description
expanded Signal<boolean> Whether the menu is currently open
hasPopup Signal<boolean> Whether the trigger has an associated menu

Methods

Method Parameters Description
open none Opens the menu
close none Closes the menu
toggle none Toggles the menu open/closed