Design a Dropdown Menu Component
Problem Statement
Design a reusable dropdown menu component for a large web application. A trigger opens a floating list of actions, users can move through the actions with pointer or keyboard input, and choosing an item invokes the consumer's callback. The component should work inside pages, dialogs, scroll containers, and responsive layouts.
This is a frontend system design prompt reported for a Roblox frontend/full-stack onsite. Treat the component as a small product platform: clarify its semantics, define a durable public API, design focus and dismissal behavior, explain positioning and layering, and show how teams can extend it without breaking accessibility.
This walkthrough follows the Product Architecture framework: requirements, data model, API design, high-level client architecture, and product trade-offs.
Clarify whether the interviewer means a menu, select, or combobox. A menu exposes commands, a select chooses one value, and a combobox filters options through a text input. This design assumes a command menu; using menu semantics for form selection would create the wrong keyboard and screen-reader behavior.