Menu (MUI v9)
Seven patterns for the MUI v9 Menu component, covering the most common product UX needs — dropdowns, icon menus, selectable lists, nested submenus, context menus, row-action overflow menus, and inline MenuList. All examples use v9 slotProps and sx (no deprecated system props).
1. Basic dropdown
Simple anchored menu bound to a button. The canonical pattern for profile / account dropdowns.
2. Icons + keyboard shortcuts
Common desktop-style edit menu with icon column, labels, and shortcut hints. Uses slotProps.paper to widen the popover.
3. Selectable (radio-style)
Single-selection menu such as a sort-order picker, with a check icon on the active option.
4. Nested submenu
Two Menu instances controlled by separate anchors. Opens "Open recent" as a side-panel submenu on hover / click.
5. Context menu (right-click)
Anchored by mouse position rather than an element. Right-click inside the panel below to open.
Right-click anywhere in this panel to open the context menu.
6. Row action overflow
Classic table / list row pattern: a kebab icon opens a dense action menu bound to the row's id.
AAPL — Apple Inc.
MSFT — Microsoft Corp.
NVDA — NVIDIA Corp.
7. Inline MenuList
MenuList rendered inline (no popover), ideal for embedded navigation panels or split views.
- Portfolio overview
- Orders
- Reports
- Share workspace