i

Menu

Navigating · researched

A floating list of actions or choices, with groups, dividers, nested submenus and checkable items.

molecule · also called Dropdown menu, Popup menu, Context menu

Each block is the real component from that system’s own package, in an isolated frame. They are live: hover, focus and press them. Frames are drawn on white so systems compare on one ground, and a font a system licenses only for its own site (GOV.UK’s Transport) falls back to what the system itself specifies.

Ant Design

Dropdown contested native: no antd 6.6.5
Variants
—
Sizes
—
States documented
default, disabled, loading
Accessibility guidance
no

Dropdown opens a Menu from a trigger (actions or destinations; context-menu trigger documented). Menu is a separate documented page for navigation menus; both render ul/li with role=menu and menuitem.

docs ↗ · code ↗

Carbon

Menu native: no @carbon/react 1.117.0
Variants
—
Sizes
extra small, small, medium, large
States documented
default, hover, focus, disabled
Accessibility guidance
yes

Menu renders role=menu with menuitem, menuitemcheckbox, menuitemradio and separator roles, not native elements. Variants listed come from the Menu buttons page that triggers it; menu itself also supports context-menu use. Docs also list danger hover states.

2 corrected on re-read
  • variants: ["Menu button","Combo button","Overflow menu"] → null Menu page has no Variants section; Menu button, Combo button, Overflow menu are on the separate Menu buttons page
  • urls: {"docs_url":"https://carbondesignsystem.com/components/menu/usage/","code_url":"https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/Menu"} → {"docs_url":"https://www.carbondesignsystem.com/building-blocks/core/components/menu/guidelines","code_url":"https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/Menu"} curl -L: HTTP 200 for both; docs_url redirects to this final URL

docs ↗ · code ↗

GOV.UK

absentGOV.UK does not ship this component. Nothing is drawn in its place.

Checked the Components index (https://design-system.service.gov.uk/components/), the Patterns index (https://design-system.service.gov.uk/patterns/), the Styles index (https://design-system.service.gov.uk/styles/) and the repo components directory (alphagov/govuk-frontend packages/govuk-frontend/src/govuk/components, plus installed 6.5.1 dist). No menu or dropdown-actions component. Service navigation and Header navigation are always-visible link lists, and the Navigate a service pattern covers them.

Material Web

Menus (<md-menu>, <md-menu-item>, <md-sub-menu>) native: partly @material/web 2.5.0
Variants
Submenus, Popover-positioned menus, Fixed-positioned menus, Document-positioned menus
Sizes
—
States documented
disabled
Accessibility guidance
yes

Menu is a custom element with role=menu set via ElementInternals; each item renders a native li, button or anchor with a menuitem/option role per its type. Positioning modes: absolute, fixed, document, popover.

1 corrected on re-read
  • variants: ["menu","submenu"] → ["Submenus","Popover-positioned menus","Fixed-positioned menus","Document-positioned menus"] prior "menu","submenu" are not named variants; docs headings are Submenus and three positioning modes

docs ↗ · code ↗

Primer

ActionMenu native: partly @primer/react 38.40.1
Variants
—
Sizes
—
States documented
default, loading
Accessibility guidance
yes

Trigger is a Button (native); the overlay content is an ActionList with menu semantics. Items can be inactive (documented separately from disabled) or loading. Supports selection and submenus.

docs ↗ · code ↗

Spectrum

Menu native: no @spectrum-web-components/button 1.12.4
Variants
—
Sizes
S, M, L, XL
States documented
default, hover, focus, active, disabled
Accessibility guidance
yes

Sizes and states from the React Spectrum (rsp) page and Menu.json; Action menu is a separate trigger component (SWC 1st-gen sp-action-menu). Native check: S2 Menu is React Aria divs with role=menu, and SWC 1st-gen sp-menu is custom elements with ARIA roles.

docs ↗ · code ↗

USWDS

absentUSWDS does not ship this component. Nothing is drawn in its place.

No action or context menu. The Header (basic, megamenu, extended) holds site navigation menus but is a page region, not a menu-from-a-trigger component. Checked the docs components index (47 components, v3.14.0), a text search of the fetched component pages, and the 88 entries of packages/ on the develop branch.

Platform facts

Native elementpopover attributeNull holds. The spec menu element 'represents a toolbar consisting of its contents, in the form of an unordered list of items (li)' and 'is simply a semantic alternative to ul'; MDN menu page: described in the spec as a semantic alternative to ul, but 'treated by browsers (and exposed through the accessibility tree) as no different than ul'. It is not the APG menu widget. The spec Popover section gives a baseline custom menu: a button with popovertarget plus an element with popover and role=menu containing role=menuitem buttons; it says arrow-key navigation and activation 'would still need author scripting'. So popover supplies the show/hide and light-dismiss behaviour only. APG: disabled items are focusable but cannot be activated (aria-disabled).
Baselinenewly · 2025-01-27
APG patternmenu-button
ARIA rolemenu
Shipped by5 of 7 systems

Anatomy

  1. menu button — APG Menu Button: a button with aria-haspopup menu (or true) and aria-expanded; opens the menu.
  2. menu — APG: the element containing the items has role menu (a persistent one is menubar).
  3. menuitem — APG roles menuitem, menuitemcheckbox, menuitemradio.
  4. separator optional — APG: an element with role separator divides items into groups; not focusable.
  5. submenu optional — APG: the menu element of a parent menuitem (aria-haspopup, aria-expanded).

Keys the APG binds

  • Menu Button, with focus on the button. Enteropens the menu and places focus on the first menu item.
  • Menu Button, with focus on the button. SpaceOpens the menu and places focus on the first menu item.
  • Menu Button, with focus on the button. (Optional) Down Arrowopens the menu and moves focus to the first menu item.
  • Menu Button, with focus on the button. (Optional) Up Arrowopens the menu and moves focus to the last menu item.
  • When a menu opens, or when a menubar receives focus, keyboard focus is placed on the first item.
  • Tab and Shift + TabMove focus into a menubar: If focus is moving into the menubar for the first time, focus is set on the first menuitem.
  • Tab and Shift + TabMove focus into a menubar: If the menubar has previously contained focus, focus is optionally set on the menuitem that last had focus.
  • Tab and Shift + TabMove focus into a menubar: Otherwise, it is set on the first menuitem that is not disabled.
  • Tab and Shift + TabWhen focus is on a menuitem in a menu or menubar, move focus out of the menu or menubar, and close all menus and submenus.
  • EnterWhen focus is on a menuitem that has a submenu, opens the submenu and places focus on its first item.
  • EnterOtherwise, activates the item and closes the menu.
  • Space(Optional): When focus is on a menuitemcheckbox, changes the state without closing the menu.
  • Space(Optional): When focus is on a menuitemradio that is not checked, without closing the menu, checks the focused menuitemradio and unchecks any other checked menuitemradio element in the same group.
  • Space(Optional): When focus is on a menuitem that has a submenu, opens the submenu and places focus on its first item.
  • Space(Optional): When focus is on a menuitem that does not have a submenu, activates the menuitem and closes the menu.
  • Down ArrowWhen focus is on a menuitem in a menubar, and that menuitem has a submenu, opens the submenu and places focus on the first item in the submenu.
  • Down ArrowWhen focus is in a menu, moves focus to the next item, optionally wrapping from the last to the first.
  • Up ArrowWhen focus is in a menu, moves focus to the previous item, optionally wrapping from the first to the last.
  • Up Arrow(Optional): When focus is on a menuitem in a menubar, and that menuitem has a submenu, opens the submenu and places focus on the last item in the submenu.
  • Right ArrowWhen focus is in a menubar, moves focus to the next item, optionally wrapping from the last to the first.
  • Right ArrowWhen focus is in a menu and on a menuitem that has a submenu, opens the submenu and places focus on its first item.
  • Right ArrowWhen focus is in a menu and on an item that does not have a submenu, performs the following 3 actions: (1) Closes the submenu and any parent menus. (2) Moves focus to the next item in the menubar. (3) If focus is now on a menuitem with a submenu, either: (Recommended) opens the submenu of that menuitem without moving focus into the submenu, or opens the submenu of that menuitem and places focus on the first item in the submenu. (APG note: if the menubar were not present, e.g., the menus were opened from a menubutton, Right Arrow would not do anything when focus is on an item that does not have a submenu.)
  • Left ArrowWhen focus is in a menubar, moves focus to the previous item, optionally wrapping from the first to the last.
  • Left ArrowWhen focus is in a submenu of an item in a menu, closes the submenu and returns focus to the parent menuitem.
  • Left ArrowWhen focus is in a submenu of an item in a menubar, performs the following 3 actions: (1) Closes the submenu. (2) Moves focus to the previous item in the menubar. (3) If focus is now on a menuitem with a submenu, either: (Recommended) opens the submenu of that menuitem without moving focus into the submenu, or opens the submenu of that menuitem and places focus on the first item in the submenu.
  • HomeIf arrow key wrapping is not supported, moves focus to the first item in the current menu or menubar.
  • EndIf arrow key wrapping is not supported, moves focus to the last item in the current menu or menubar.
  • Any key that corresponds to a printable character (Optional)Move focus to the next item in the current menu whose label begins with that printable character.
  • EscapeClose the menu that contains focus and return focus to the element or context, e.g., menu button or parent menuitem, from which the menu was opened.
  • Vertically arranged menubar items and horizontally arranged menu itemsDown Arrow performs as Right Arrow is described above, and vice versa.
  • Vertically arranged menubar items and horizontally arranged menu itemsUp Arrow performs as Left Arrow is described above, and vice versa.
  • Note (not a key)Disabled menu items are focusable but cannot be activated. A separator in a menu is not focusable or interactive.

The seven states

default Menu closed; button aria-expanded=false.
hover Pointer-only CSS state; not defined by APG or HTML.
focus Roving focus on items; Tab leaves the menu.
active Mapping inference: APG has no 'active' state; it defines aria-expanded=true on the button/parent menuitem and aria-checked=true on checked items.
disabled APG: aria-disabled=true on an item; focusable but not activatable.
error n/a — Not defined.
loading n/a — Not defined.

Every cell was read twice, the second time from raw sources by a separate pass. 3 of 35 fields changed on the second read — open any “corrected” note to see what it said before.