{"record":{"id":"7ff3c3355cb055e7","repo":"mui/material-ui","slug":"mui-menulistcontext-is-missing-menuitems-must-be","errorCode":null,"errorMessage":"MUI: MenuListContext is missing. MenuItems must be placed within Menu or MenuList.","messagePattern":"MUI: MenuListContext is missing\\. MenuItems must be placed within Menu or MenuList\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/mui-material/src/MenuList/MenuListContext.tsx","lineNumber":24,"sourceCode":" */\n\nexport interface MenuListContextValue {\n  itemsFocusableWhenDisabled: boolean;\n  suppressInitialFocusVisible: boolean;\n  variant: 'menu' | 'selectedMenu';\n}\n\nexport const MenuListContext = React.createContext<MenuListContextValue | undefined>(undefined);\n\nif (process.env.NODE_ENV !== 'production') {\n  MenuListContext.displayName = 'MenuListContext';\n}\n\nexport function useMenuListContext() {\n  const context = React.useContext(MenuListContext);\n\n  if (context === undefined) {\n    throw new Error(\n      'MUI: MenuListContext is missing. MenuItems must be placed within Menu or MenuList.',\n    );\n  }\n\n  return context;\n}\n","sourceCodeStart":6,"sourceCodeEnd":31,"githubUrl":"https://github.com/mui/material-ui/blob/bdc96df2cb530fcdd60a7a7aabe37f610ce0f0a5/packages/mui-material/src/MenuList/MenuListContext.tsx#L6-L31","documentation":"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.","triggerScenarios":"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.","commonSituations":"Building a custom dropdown and reusing MenuItem without the Menu wrapper; refactoring that moves items into a separate component tree that loses the context.","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."],"exampleFix":"// before\n<MenuItem onClick={...}>Open</MenuItem>\n// after\n<Menu open={open}>\n  <MenuItem onClick={...}>Open</MenuItem>\n</Menu>","handlingStrategy":"validation","validationCode":"import { useContext } from 'react';\nimport { MenuListContext } from '@mui/material/MenuList/MenuListContext'; // internal path; in user code, render MenuItem only inside <Menu>/<MenuList>\nfunction useInsideMenuList() {\n  // MenuListContext is internal; the practical guard is structural:\n  return true; // ensure <MenuItem> is a child of <Menu>/<MenuList> in JSX\n}","typeGuard":null,"tryCatchPattern":null,"preventionTips":["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."],"tags":["react","material","menu","context","misuse"],"backgroundTag":null,"analyzedSha":"bdc96df2cb530fcdd60a7a7aabe37f610ce0f0a5","analyzedAt":"2026-08-12T22:59:56.717Z","schemaVersion":2},"datasetVersion":"2026-08-12T23:17:12.415Z"}