Design an Action Menu – Frontend System Design
We’ll walk through the frontend design of a reusable dropdown menu — a trigger that opens a list of actions, not a select. Our goal is a component you can drop in a toolbar, a table row, or a nav, with click, optional hover, full keyboard support, nested submenus, and a public API that does not leak positioning math.
This is an accessibility interview that also happens to include a floating panel. Interviewers want roving focus, typeahead, focus restore, and flip/shift so the menu stays on screen. There is no meeting server and no CRDT. You’ll see item counts, the focus model, the positioner, and the edge cases that show up on touch and in overflow-hidden parents.
Problem Statement
Design a reusable dropdown menu component.
Requirements:
- A trigger button that opens a list of actions
- Click, hover (optional), and keyboard all work
- Nested submenus
- It can be used in a toolbar, a table row, or a nav
Focus on accessibility, positioning, and the public API.
Clarifying Questions
| # | Question | Interviewer’s... premium content. Premium Keep reading with PremiumGet the rest of this guide plus every premium question, solution, and system design deep dive.
     4.9/5 from our users |
|---|