Menu Button
A menu button opens a list of actions or choices. It tells software whether the menu is open.
A real example
In a document editor, “Export” opens PDF, DOCX, and Markdown choices. Down Arrow opens the menu and focuses the first item; Escape closes it and returns focus. Choosing PDF starts one export, not a setting that stays on.
Main parts
- 01Trigger button
- 02Popup menu
- 03Menu items
Use it when
Use it for a small group of commands when showing every button would make the page crowded. Include the full menu keyboard behavior.
Do not use it when
Do not use menu roles for normal site links or for a form field that sends a value.
Name used in code
button aria-haspopup=menu aria-expanded + role=menu/menuitem Before you ship
Move focus on purpose. Keep it inside only when the overlay blocks the page. Support Escape and a visible close button, then return focus to the opener. Keep entered data and check small-screen, loading, and failure states.
Outcome: Use Menu Button to solve this user need without losing the current context. User context: In a document editor, “Export” opens PDF, DOCX, and Markdown choices. Down Arrow opens the menu and focuses the first item; Escape closes it and returns focus. Choosing PDF starts one export, not a setting that stays on. Recommended pattern: Menu Button. Why it fits: Use it for a small group of commands when showing every button would make the page crowded. Include the full menu keyboard behavior. Do not use it when: Do not use menu roles for normal site links or for a form field that sends a value. Product requirements: Define the default, loading, empty, error, success, and recovery states. Keep user input. Give clear feedback after every action. Accessibility and resilience: Use semantic HTML, full keyboard access, and visible focus. Make the layout work when zoomed and support reduced motion. Follow the project’s current rules. Do not add a new UI library unless the project already uses it. Acceptance criteria: The main task works with keyboard only and at 320px width. Focus and status changes are announced. Check loading, failure, retry, cancel, and reduced-motion paths. Evidence and limits (evidence boundary): It is official for that source. Other platforms or teams may use the term in another way. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
Check this request
Review the current use of Menu Button. Definition: A menu button opens a list of actions or choices. It tells software whether the menu is open. Release checks: Move focus on purpose. Keep it inside only when the overlay blocks the page. Support Escape and a visible close button, then return focus to the opener. Keep entered data and check small-screen, loading, and failure states. Before changing code, report the evidence you found, gaps, severity, and the smallest safe fix.