Overflow Menu Button
A small button, often shown as three dots, opens less important actions. Use it when those actions do not fit on the page.
A real example
Each project row shows Open. Duplicate, Archive, and Delete stay in its overflow menu.
Main parts
- 01Trigger
- 02Anchored or modal surface
- 03Focus boundary
- 04Dismiss path
Use it when
Use it when one item has several secondary actions and showing every button would crowd the page.
Do not use it when
Do not hide the main action or a destructive result behind an unlabeled icon. Keep the only path to a common task visible.
Name used in code
button[aria-haspopup=menu] + role=menu 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 Overflow Menu Button to solve this user need without losing the current context. User context: Each project row shows Open. Duplicate, Archive, and Delete stay in its overflow menu. Recommended pattern: Overflow Menu Button. Why it fits: Use it when one item has several secondary actions and showing every button would crowd the page. Do not use it when: Do not hide the main action or a destructive result behind an unlabeled icon. Keep the only path to a common task visible. 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): No single official standard controls the whole term. Its meaning may change across teams, platforms, or frameworks. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
Check this request
Review the current use of Overflow Menu Button. Definition: A small button, often shown as three dots, opens less important actions. Use it when those actions do not fit on the page. 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.