New Component: Menu - Navigation Menu #481
Description
Description
Menu Definition
A Menu is a transient container of contextually related actions, revealed by a trigger, that allows a user to take one immediate action before dismissing.
Problem it solves
Users frequently need to take a small set of context-specific actions without navigating away from their current task.
This problem commonly occurs in situations where:
- Multiple secondary actions apply to an object or view
- Screen space is constrained
- Actions should not permanently alter layout or state
A system-level Menu component is required to prevent inconsistent interaction models, accessibility regressions, and ad hoc implementations across platforms.
Non-goals
The Menu does not:
- Serve as primary or secondary navigation
- Act as a selection control or form input
- Persist on screen after an action is taken
- Support multi-step flows
- Contain nested or cascading menus
- Replace command palettes, sheets, or dialogs
Behavior
A Menu presents a short, scannable list of actions
Exactly one action may be taken per invocation
Lifecycle
The Menu is opened by a deliberate user action
The Menu receives focus or attention immediately on open
The Menu dismisses after an action is taken or explicitly dismissed
User expectations
Actions are clearly related to the trigger’s context
The Menu does not change underlying state until an action is selected
Accessibility intent
The Menu is fully operable via assistive technology
The Menu announces its presence and available actions
Focus returns to a logical location after dismissal
Development
- NPE Kickoff
- Web Kickoff
- Create iOS Jira ticket
- Create Android Jira ticket
- Create Web github ticket
- Triage and identify sprint timelines
- Identify target release date
- Review in-progress dev work
- Finalize Playbook page + additional tabs
- QA (create QA process doc)
- QA should also include checking code connect integration
- Am I missing a step for DT like component status api?
- Ensure code connect is working
Screenshots
No response
Figma link
https://www.figma.com/design/jFbAR0o364WhsjELfxl2SI/Playbook-2.0---Components?node-id=14486-111419
Engineering pre-requisites
- Successful design review with Design System Team.
- Supports dark mode.
- Supports responsive design.
- Tokens have been provided (or already exist).
- Successful accessibility review with Core A11Y Team and MIND pattern is created.
- Successful frontend review with eBayUI Team.