Menubar
A React component for building accessible application menus.
The menu bar is a visually persistent menu similar to those found in desktop applications that provides a consistent set of frequently used commands.
Material UI does not include a menu bar component out of the box, but this page provides components composed with the Base UI Menubar and styled to align with Material Design (MD2) specifications, so they can be used with Material UI.
As such, you must install Base UI before proceeding. The examples that follow can then be copied and pasted directly into your app. Note that Base UI is tree-shakeable, so the final bundle will only include the components used in your project.
npm install @base-ui/reactUsage
- Select one of the demos below that fits your visual design needs.
- Click Expand code in the toolbar.
- Select the file that starts with
./Menubar. - Copy the code and paste it into your project.
Basic menubar
The basic menubar component displays a row of menu triggers with dropdowns containing menu items.
Shortcut hints
Display keyboard shortcuts alongside menu items using the hint prop.
Checkbox items
For toggle options that can be independently enabled or disabled.
Radio group items
For mutually exclusive options where only one can be selected at a time.
Icon menu items
Add icons to menu items using the icon prop for faster visual recognition.
Group labels
Organize menu items into logical sections with labeled groups.
API
See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.