better-mui-menu

better-mui-menu

better-mui-menu is a zero-dependency wrapper for Material UI Menu to support nested menus and full keyboard accessibility with proper focus management.

Live demo

Edit in StackBlitz

Features

• Excellent Keyboard Navigation for Accessibility – navigate with arrow keys, open submenus with right arrow or Enter, close them with left arrow or Escape, and have the menu stack stay in sync with focus.
• Unlimited nesting – describe every submenu with an items array and better-mui-menu renders NestedMenuItem poppers that stay synchronized with their parents.
• Customizable – style your menu and menu items using MUI's Menu and MenuItem props.
• Data-driven API – you keep work in a single MenuItem[] list; leaves, dividers, and nested branches all live alongside each other.

Installation

(yarn | npm | pnpm) install better-mui-menu

Since the component renders Material UI primitives, also install the peer dependencies:

npm install @mui/material @emotion/react @emotion/styled @mui/icons-material

Usage

import { Menu, type MenuItem } from 'better-mui-menu'

const menuItems: MenuItem[] = [
  {
    id: 'save',
    label: 'Save',
    startIcon: Save,
    onClick: () => console.log('Save action'),
  },
  { type: 'divider' },
  {
    label: (
      <Stack>
        Cloud actions
        <Typography variant="caption" color="text.secondary">
          Requires internet connection
        </Typography>
      </Stack>
    ),
    startIcon: <Cloud fontSize='small' sx={{ ml: 0.5 }} />,
    items: [
      { label: 'Upload', onClick: () => console.log('Upload') },
      { label: 'Download', onClick: () => console.log('Download') },
    ],
  },
]

export function FileMenu() {
  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)

  return (
    <>
      <Button variant="contained" onClick={event => setAnchorEl(event.currentTarget)}>
        Open file menu
      </Button>
      <Menu
        anchorEl={anchorEl}
        open={Boolean(anchorEl)}
        onClose={() => setAnchorEl(null)}
        items={menuItems}
      />
    </>
  )
}

MenuItem Reference

MenuItem extends @mui/material/MenuItemProps (excluding children) so you can still pass disabled, sx, aria-*, data-*, etc.

Field	Applies to	Type / values	Required	Default	Notes
type	all entries	'item' | 'divider' | 'header'	no	'item'	Use 'divider' for separators, 'header' for section labels.
id	'item'	string	no	auto-generated	Used for stable ARIA/menu item IDs.
label	'item', 'header'	text or JSX	yes ('item', 'header')	none	Not used for 'divider'.
startIcon	'item'	MUI Icon or JSX	no	none	Example: Save or <Save fontSize='small' />.
endIcon	'item'	MUI Icon or JSX	no	none	For submenu triggers, a right-arrow icon is shown when omitted.
items	'item'	MenuItem[]	no	none	If present and non-empty, renders a nested submenu.
onClick	'item'	function	no	none	Runs on leaf item click; menu stack closes afterward.
...MenuItemProps	'item'	MUI MenuItem props (except children, type)	no	MUI defaults	Example: disabled, dense, selected, data-*.