Menu
Menu is the anchored container (shell) that manages positioning, anchoring, opening/closing, focus management, and transitions. It typically wraps a MenuList, which renders the list of MenuItem options and handles keyboard navigation.
Basic Menu
Menus are anchored to a control (usually a button). Clicking the control opens the menu. Select an item to perform an action or close the menu.
Positioning
Use anchorEl and origin props to control where the Menu appears relative to its trigger. Menu uses Popover internally and manages focus and dismissal via open and onClose.
MenuItem
MenuItem represents an actionable option within a menu. Use props like selected, disabled, and autoFocus to communicate state, or render as a link with component="a" and href.
MenuList
MenuList renders the list of options and manages keyboard navigation (Arrow keys, Home/End) and roles (e.g., role="menu"). It does not handle positioning or anchoring—that is the responsibility of Menu. Use it standalone when you need menu-like behavior without a floating surface.
