Menu button
Doing · researchedOne button that opens a menu of actions when pressed.
molecule · contains button, 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 (and Dropdown.Button) native: no antd 6.6.5- Variants
- —
- Sizes
- —
- States documented
- disabled
- Accessibility guidance
- no
Dropdown opens a menu from any trigger element (rc-menu, role=menu); Dropdown.Button pairs a native button with a dropdown trigger.
1 corrected on re-read
- states_documented: null → ["disabled"] Dropdown API: disabled
Carbon
Menu button native: partly- Variants
- primary, tertiary, ghost
- Sizes
- xs, sm, md, lg
- States documented
- —
- Accessibility guidance
- yes
Carbon Button plus a Menu popup; kind and size values are MenuButton prop types. The docs page is a family page (menu button, combo button, overflow menu); the index's second 'Menu buttons' entry is that page, not a component.
2 corrected on re-read
- states_documented: ["focus"] → null Page defers to Button style for default and interactive states; lists none itself
- urls: {"docs_url":"https://carbondesignsystem.com/components/menu-buttons/usage/","code_url":"https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/MenuButton"} → {"docs_url":"https://www.carbondesignsystem.com/building-blocks/core/components/menu-buttons/guidelines","code_url":"https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/MenuButton"} docs 200 after redirect to https://www.carbondesignsystem.com/building-blocks/core/components/menu-buttons/guidelines; code URL 200
GOV.UK
Checked: component index (https://design-system.service.gov.uk/components/ , 37 components), patterns index, styles index, repo tree src/govuk/components and objects, and installed govuk-frontend 6.5.1 components directory. No menu or dropdown-button component. Header and Service navigation have a mobile 'Menu' toggle button, but it is internal to those components.
Material Web
Checked docs/components (20 component pages), the repo top-level dirs, labs/, labs/gb/components and the installed 2.5.0 package. menu.md pairs an md-menu with any separate button via anchor / anchorElement; no combined component.
Primer
ActionMenu native: yes @primer/react 38.40.1- Variants
- —
- Sizes
- —
- States documented
- loading
- Accessibility guidance
- yes
Primer React. ActionMenu.Button renders a Button that opens an ActionList in an Overlay; status ready. An older ActionMenu in src/deprecated is also present (deprecated).
1 corrected on re-read
- states_documented: null → ["loading"] Examples With a loading item and With an inactive item (item-level)
Spectrum
Action menu native: partly @spectrum-web-components/button 1.12.4- Variants
- —
- Sizes
- XS, S, M, L, XL
- States documented
- —
- Accessibility guidance
- no
Implementations: S2 ActionMenu (an action button that opens a menu), v3 ActionMenu, SWC 1st-gen action-menu, spectrum-css actionmenu. The trigger is a real button and the menu is a React Aria popover menu. Installed SWC 1.12.4 has action-menu. Docs read from the S2 MDX (isQuiet, size); no accessibility section found.
1 corrected on re-read
- sizes: ["S","M","L","XL"] → ["XS","S","M","L","XL"] ActionMenuProps picks ActionButton size, whose union is 'XS'|'S'|'M'|'L'|'XL'
USWDS
Checked the docs component index and status page and the develop packages/ tree (88 entries, matching installed 3.14.0): no menu or dropdown-menu component, package or pattern. The header's nav submenus are buttons that toggle aria-expanded, but that is part of the Header, not a standalone menu button.
Platform facts
Anatomy
- menu button — APG: the element that opens the menu has role button; styled like a push button with a downward arrow.
- menu — APG: container of menu items has role menu.
- menu items — APG Menu and Menubar pattern (not read in full).
- submenu optional — APG Menu and Menubar: 'Submenus, also known as popup menus, are elements with role menu'; menuitems may have child submenus.
- separator optional — APG Menu and Menubar note: a separator in a menu is not focusable or interactive.
Keys the APG binds
- Enteropens the menu and places focus on the first menu item.
- SpaceOpens the menu and places focus on the first menu item.
- (Optional) Down Arrowopens the menu and moves focus to the first menu item.
- (Optional) Up Arrowopens the menu and moves focus to the last menu item.
- The keyboard behaviors needed after the menu is open are described in the Menu and Menubar Pattern.
- In the open menu (Menu and Menubar page)Down Arrow: moves focus to the next item, optionally wrapping from the last to the first.
- In the open menuUp Arrow: moves focus to the previous item, optionally wrapping from the first to the last.
- In the open menuEnter: when focus is on a menuitem that has a submenu, opens the submenu and places focus on its first item; otherwise activates the item and closes the menu.
- In the open menuSpace (Optional): on a menuitemcheckbox changes the state without closing the menu; on an unchecked menuitemradio checks it and unchecks the other in the group without closing; on a menuitem with a submenu opens it; on a menuitem without a submenu activates it and closes the menu.
- In the open menuRight Arrow: when focus is on a menuitem that has a submenu, opens the submenu and places focus on its first item. (In a menubar it moves focus to the next item; when the menu was opened from a menu button and the item has no submenu, it does nothing.)
- In the open menuLeft Arrow: when focus is in a submenu of an item in a menu, closes the submenu and returns focus to the parent menuitem.
- In the open menuHome: if arrow key wrapping is not supported, moves focus to the first item in the current menu.
- In the open menuEnd: if arrow key wrapping is not supported, moves focus to the last item in the current menu.
- In the open menuany printable character (Optional): moves focus to the next item in the current menu whose label begins with that character.
- In the open menuEscape: closes the menu that contains focus and returns focus to the element from which it was opened, e.g. the menu button.
- In the open menuTab and Shift + Tab: move focus out of the menu and close all menus and submenus; they do not move focus into a menu or among its items.
The seven states
| default | Menu closed, aria-expanded false. |
|---|---|
| hover | Pointer-only CSS state; not defined by APG or HTML. |
| focus | Focus on the button. |
| active | Pressed state while the pointer or key is down; CSS :active. Not defined by APG. |
| disabled | disabled on a native button. |
| 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. 5 of 35 fields changed on the second read — open any “corrected” note to see what it said before.