The Complete MUI MenuItem Guide (Links, Disabled, Select, onClick)

The Material-UI MenuItem component has many useful props built into its API. It can easily be given a selected or disabled state, and these states provide useful default classes. The MenuItem component can also be used to add links to Menus.

The MenuItem onClick prop is important for setting states and interacting with Menu links, so we will explore click handling in detail.

Below is the menu we will build. The first MenuItem is a link, the next two are in a selected state, and the final MenuItem is disabled.

Full React code is in the Resources section.

A video version of this post is on YouTube or watch below:

MUI MenuItem Links

Material-UI MenuItems can become links by adding two props:

• component – Passing a Link component makes the MenuItem an anchor element with a potential href value
• href – The destination to open on click

I also like to add the target prop to make the link open in a new tab.

<MenuItem
  component={Link}
  href="https://en.wikipedia.org/wiki/History_of_the_electric_vehicle"
  target="_blank"
/>

MUI MenuItem Disabled State

The Material-UI MenuItem can be disabled by adding the disabled boolean prop:

<MenuItem
  disabled
/>

This adds the Mui-disabled class in the DOM.

This class can be used for targeting disabled MenuItems with nested selectors. I added the below const to each MenuItem sx prop, but it only selected and styled the disabled menu item.

const menuItemStyle = {
    "&.Mui-disabled": {
      backgroundColor: 'lightgrey'
    }
}

MUI MenuItem Selected State

Material-UI MenuItems have a selected boolean that applies default selected styling when the boolean is true.

<MenuItem

  selected
/>

Unfortunately, it is challenging to dynamically update the MenuItem selected state on click of the item. I had to create a complex click handler that maintained an array of MenuItem index values that were selected.

const handleClick = (index: number) => {
  if (selectedList.includes(index)) {
    setSelectedList(
      selectedList.filter(function (value) {
        return value !== index;
      }
      )
    );
  } else {
    setSelectedList([...selectedList, index]);
  }
}

//JSX
<MenuItem
  onClick={() => handleClick(1)}
  selected={selectedList.includes(1)}
/>

I couldn’t find a better way to pass index values to the click handler. If I rendered similar MenuItems from an array using map, I could have passed the map index.

Once selected, the MenuItem had a default class of Mui-selected applied in the DOM. You can use MenuItem classes to style their contents.

MUI MenuItem onClick

The onClick handler for MenuItem typically receives one prop of TypeScript type React.MouseEvent<HTMLLIElement>. This might be slightly different if the component prop was used to change the rendered element type.

Instead of adding a click handler on the individual MenuItems, consider adding the click handler on the wrapping Menu component. The event.target will still contain useful data about the exact MenuItem clicked. In this tutorial I did not use this method because I needed MenuItem index values.

Resources

Useful related posts:

• The Definitive MUI MenuButton and Menu Example
• The Ultimate Guide to the MUI ‘sx’ Prop
• The Ultimate MUI Custom Button Example

MUI MenuItem API

import { useState } from 'react';
import Button from "@mui/material/Button";
import Menu from "@mui/material/Menu";
import MenuItem from "@mui/material/MenuItem";
import Link from "@mui/material/Link";
import ListItemText from "@mui/material/ListItemText";
import PopupState, { bindTrigger, bindMenu } from "material-ui-popup-state";
import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
import ArrowDropUpIcon from "@mui/icons-material/ArrowDropUp";
import { createTheme } from "@mui/material/styles";

export default function SuperMenuItem() {
  const theme = createTheme();
  const [selectedList, setSelectedList] = useState<number[]>([]);

  const handleClick = (index: number) => {
    if (selectedList.includes(index)) {
      setSelectedList(
        selectedList.filter(function (value) {
          return value !== index;
        }
        )
      );
    } else {
      setSelectedList([...selectedList, index]);
    }
  }

  const menuItemBorderBottom = {
    borderBottom: `1px solid ${theme.palette.warning.main}`,
  };

  const menuItemStyle = {
    "&.Mui-disabled": {
      backgroundColor: 'lightgrey'
    },
    "&.Mui-selected": {
      color: 'green'
    }
  }

  return (
    <PopupState variant="popover" popupId="demo-popup-menu">
      {(popupState) => (
        <>
          <Button
            sx={{
              backgroundColor: "warning.main",
              "&:hover": { backgroundColor: "warning.dark" },
            }}
            variant="contained"
            {...bindTrigger(popupState)}
            endIcon={
              popupState.isOpen ? <ArrowDropUpIcon /> : <ArrowDropDownIcon />
            }
          >
            Electric Cars
          </Button>
          <Menu {...bindMenu(popupState)} PaperProps={{ sx: { width: 500 } }}>
            <MenuItem
              onClick={() => handleClick(0)}
              selected={selectedList.includes(0)}
              component={Link}
              href="https://en.wikipedia.org/wiki/History_of_the_electric_vehicle"
              target="_blank"
              sx={{
                ...menuItemBorderBottom,
                color: "primary.main",
                textDecoration: "underline",
                ...menuItemStyle
              }}

            >
              Rivian
            </MenuItem>
            <MenuItem
              onClick={() => handleClick(1)}
              selected={selectedList.includes(1)}
              sx={{
                ...menuItemBorderBottom,
                ...menuItemStyle
              }}
            >
              Prius
            </MenuItem>
            <MenuItem
              onClick={() => handleClick(2)}
              selected={selectedList.includes(2)}
              sx={{...menuItemBorderBottom, ...menuItemStyle}}
            >
              Prologue
            </MenuItem>
            <MenuItem
              onClick={() => handleClick(3)}
              selected={selectedList.includes(3)}
              component={Link}
              disabled
              href="https://www.toyota.com/priusprime/"
              target="_blank"
              sx={{...menuItemStyle}}
            >
              <ListItemText>Leaf</ListItemText>
            </MenuItem>
          </Menu>
        </>
      )}
    </PopupState>
  );
}