The Unstyled Menu component gives users a list of items in a popup that they can navigate through with a mouse or keyboard.
It renders an unordered list (<ul>) by default.
Use the Unstyled Menu Item to add items to the menu.
These are rendered as <li> elements.
Components
Usage
After installation, you can start building with this component collection using the following basic elements:
import MenuUnstyled from'@mui/base/MenuUnstyled';import MenuItemUnstyled from'@mui/base/MenuItemUnstyled';exportdefaultfunctionMyApp(){return(<MenuUnstyled><MenuItemUnstyled>{/* item one */}</MenuItemUnstyled><MenuItemUnstyled>{/* item two */}</MenuItemUnstyled></MenuUnstyled>);}
Basics
The Unstyled Menu serves as a replacement for the native HTML <ul>, and the Unstyled Menu Item corresponds to the <li> tag.
The following demo shows how to create and style a Menu component.
Click Dashboard to view the menu—notice that it uses the built-in Unstyled Popper component to visually break out of its parent container:
Anatomy
The Unstyled Menu component is composed of a root slot that renders an Unstyled Popper <div> by default.
It contains one interior listbox <ul> slot.
The Unstyled Menu Item has a single root <li> slot.
Mui-expanded - set when the menu is open; this class is set on both Root and Popper slots
Unstyled Menu Item can set the following classes:
Mui-disabled - set when the MenuItem has the disabled prop
Mui-focusVisible - set when the MenuItem is highlighted via keyboard navigation.
This is a polyfill for the native :focus-visible pseudoclass as it's not available in Safari.
The useMenu and useMenuItem hooks let you apply the functionality of the Menu components to fully custom components.
They return props to be placed on the custom components, along with fields representing the components' internal states.
The following demo shows how to build a menu using hooks:
Unstyled components and their corresponding hooks work interchangeably with one another—for example, you can create an Unstyled Menu component that contains menu items built with the useMenuItem hook.
Customization
Wrapping MenuItems
Unstyled Menu Item components don't have to be direct children of a Unstyled Menu component.
You can wrap them in any component needed to achieve the desired appearance.
In addition to Unstyled Menu Item components, the Unstyled Menu component can also contain non-interactive children, such as helper text.
The following demo shows an example of a menu with items grouped under non-interactive headers, along with helper text that displays the Current zoom level: