MenuItem API
API reference docs for the React MenuItem component. Learn about the props, CSS, and other APIs of this exported module.
Component demos
Import
import MenuItem from '@mui/joy/MenuItem';
// or
import { MenuItem } from '@mui/joy';ref is forwarded to the root element.Inheritance
While not explicitly documented above, the props of the ListItemButton component are also available in MenuItem. You can take advantage of this to target nested components.
Theme default props
You can use JoyMenuItem to change the default props of this component with the theme.
To learn how to customize the slot, check out the Overriding component structure guide.
These class names are useful for styling with CSS. They are applied to the component's slots when specific states are triggered.
Class name applied to the root element when color inversion is triggered.
Rule name:colorContext
Class name applied to the root element if color="danger".
Rule name:colorDanger
Class name applied to the root element if color="neutral".
Rule name:colorNeutral
Class name applied to the root element if color="primary".
Rule name:colorPrimary
Class name applied to the root element if color="success".
Rule name:colorSuccess
Class name applied to the root element if color="warning".
Rule name:colorWarning
State class applied to the root element if variant="outlined".
Rule name:variantOutlined
State class applied to the root element if variant="plain".
Rule name:variantPlain
State class applied to the root element if variant="soft".
Rule name:variantSoft
You can override the style of the component using one of these customization options:
- With a global class name.
- With a rule name as part of the component's
styleOverridesproperty in a custom theme.