Enabling Horizontal Scrolling for MUI Menu Content

On devices with a narrow width, if the menu content is wide, it will overflow the screen.
Therefore, we will make it possible to display the entire content by scrolling horizontally.

Implementation

The key points are the following two properties of the Menu component:

• slotProps / paper / style / overflowX: auto
• MenuListProps / style / width: max-content

import './App.css';

import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';

const App = () => {
  return (
    <div className="content">
      <Menu
        open
        sx={{
          width: '10em',
        }}
        slotProps={{
          paper: {
            style: {
              overflowX: 'auto',
            },
          },
        }}
        MenuListProps={{
          style: {
            width: 'max-content',
          },
        }}
      >
        <MenuItem>VERY LONG MENU ITEM 1</MenuItem>
        <MenuItem>VERY LONG MENU ITEM 2</MenuItem>
        <MenuItem>VERY LONG MENU ITEM 3</MenuItem>
      </Menu>
    </div>
  );
};

export default App;

The internal implementation of the Menu component consists of a MenuList component placed inside a Popover component. This is achieved by setting the overflow attribute on the Paper within the Popover component and matching the width of the MenuList (which is a child of Paper) to the width of its MenuItem contents.

Environment

• MUI v6