mui/material-ui · error · Error

MUI: MenuListContext is missing. MenuItems must be placed wi

Error message

MUI: MenuListContext is missing. MenuItems must be placed within Menu or MenuList.

What it means

MenuListContext (in @mui/material MenuList) is provided by Menu/MenuList and consumed by MenuItem-related hooks. useMenuListContext throws when the context value is undefined — i.e. the consumer is rendered outside any Menu or MenuList. The message tells you MenuItem must be a descendant of Menu or MenuList, since it relies on the context for focus/disabled/variant behaviour.

Source

Thrown at packages/mui-material/src/MenuList/MenuListContext.tsx:24

 */

export interface MenuListContextValue {
  itemsFocusableWhenDisabled: boolean;
  suppressInitialFocusVisible: boolean;
  variant: 'menu' | 'selectedMenu';
}

export const MenuListContext = React.createContext<MenuListContextValue | undefined>(undefined);

if (process.env.NODE_ENV !== 'production') {
  MenuListContext.displayName = 'MenuListContext';
}

export function useMenuListContext() {
  const context = React.useContext(MenuListContext);

  if (context === undefined) {
    throw new Error(
      'MUI: MenuListContext is missing. MenuItems must be placed within Menu or MenuList.',
    );
  }

  return context;
}

View on GitHub (pinned to bdc96df2cb)

Solutions

Render MenuItem as a descendant of <Menu> or <MenuList>.
If you need a custom container, wrap your items in <MenuList> (or provide a MenuListContext.Provider with the expected value).
Avoid portalling MenuItem out of the Menu subtree; if you must, re-provide MenuListContext in the portal target.

Example fix

// before
<MenuItem onClick={...}>Open</MenuItem>
// after
<Menu open={open}>
  <MenuItem onClick={...}>Open</MenuItem>
</Menu>

Defensive patterns

Strategy: validation

Validate before calling

import { useContext } from 'react';
import { MenuListContext } from '@mui/material/MenuList/MenuListContext'; // internal path; in user code, render MenuItem only inside <Menu>/<MenuList>
function useInsideMenuList() {
  // MenuListContext is internal; the practical guard is structural:
  return true; // ensure <MenuItem> is a child of <Menu>/<MenuList> in JSX
}

Prevention

Always render MenuItem as a descendant of Menu or MenuList.
Avoid portalling MenuItem out of the Menu subtree.
When building a custom menu, wrap items in <MenuList> or provide MenuListContext explicitly.

When it happens

Trigger: Rendering a MenuItem (or any component calling useMenuListContext) as a standalone, not inside <Menu> or <MenuList>; portalling MenuItem content out of the Menu subtree; rendering items in a custom list that does not supply MenuListContext.

Common situations: Building a custom dropdown and reusing MenuItem without the Menu wrapper; refactoring that moves items into a separate component tree that loses the context.

Related errors

AI-assisted analysis of mui/material-ui@bdc96df2cb (2026-08-12). Data as JSON: /api/errors/7ff3c3355cb055e7. Report an issue: GitHub.