Sometimes, we want to position MenuItems under the React Material UI Select component.

In this article, we’ll look at how to position MenuItems under the React Material UI Select component.

How to position MenuItems under the React Material UI Select component?

To position MenuItems under the React Material UI Select component, we can set the Select‘s MenuProps component to set the position of the MenuItems.

For instance, we write:

import * as React from "react";
import Select from "@material-ui/core/Select";
import MenuItem from "@material-ui/core/MenuItem";

export default function App() {
  return (
    <div>
      <Select
        fullWidth
        MenuProps={{
          anchorOrigin: {
            vertical: "bottom",
            horizontal: "left"
          },
          transformOrigin: {
            vertical: "top",
            horizontal: "left"
          },
          getContentAnchorEl: null
        }}
      >
        <MenuItem value={10}>Ten</MenuItem>
        <MenuItem value={20}>Twenty</MenuItem>
        <MenuItem value={30}>Thirty</MenuItem>
      </Select>
    </div>
  );
}

We add the Select drop down with the MenuProps prop set to an object that has the anchorOrigin property to set the position of the menu.

We set vertical to 'bottom' and horizontal to 'left' and we set transformOrigin to an object with vertical set to 'top' and horizontal set to 'left' to put the MenuItems below the Select component.

Conclusion

To position MenuItems under the React Material UI Select component, we can set the Select‘s MenuProps component to set the position of the MenuItems.