Material-UI Dropdowns

Toggle contextual overlays for displaying lists of links and more with the Material-ui dropdown plugin.

Examples

Action Another action Something else here
Flags
Copy
import React from "react";
// @material-ui/core components
import Box from "@material-ui/core/Box";
import Button from "@material-ui/core/Button";
import Menu from "@material-ui/core/Menu";
import MenuItem from "@material-ui/core/MenuItem";
// @material-ui/icons components

// core components

export default function UserDropdown() {
  const [anchorEl, setAnchorEl] = React.useState(null);

  const isMenuOpen = Boolean(anchorEl);

  const handleProfileMenuOpen = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleMenuClose = () => {
    setAnchorEl(null);
  };

  const menuId = "dropdowns-user-dropdown-id";
  const menuPositions = { vertical: "top", horizontal: "right" };
  const renderMenu = (
    <Menu
      anchorEl={anchorEl}
      anchorOrigin={}
      id={menuId}
      keepMounted
      transformOrigin={menuPositions}
      open={isMenuOpen}
      onClose={handleMenuClose}
    >
      <Box
        display="flex!important"
        alignItems="center!important"
        component={MenuItem}
        onClick={handleMenuClose}
      >
        <span>Action</span>
      </Box>
      <Box
        display="flex!important"
        alignItems="center!important"
        component={MenuItem}
        onClick={handleMenuClose}
      >
        <span>Another Action</span>
      </Box>
      <Box
        display="flex!important"
        alignItems="center!important"
        component={MenuItem}
        onClick={handleMenuClose}
      >
        <span>Something else here</span>
      </Box>
    </Menu>
  );

  return (
    <>
      <Button
        edge="end"
        aria-label="account of current user"
        aria-controls={menuId}
        aria-haspopup="true"
        onClick={handleProfileMenuOpen}
        color="secondary"
        variant="contained"
      >
        Regular
      </Button>
      {renderMenu}
    </>
  );
}
Copy
import React from "react";
// @material-ui/core components
import Box from "@material-ui/core/Box";
import Button from "@material-ui/core/Button";
import Menu from "@material-ui/core/Menu";
import MenuItem from "@material-ui/core/MenuItem";
// @material-ui/icons components

// core components

export default function UserDropdown() {
  const [anchorEl, setAnchorEl] = React.useState(null);

  const isMenuOpen = Boolean(anchorEl);

  const handleProfileMenuOpen = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleMenuClose = () => {
    setAnchorEl(null);
  };

  const menuId = "dropdowns-user-dropdown-id";
  const menuPositions = { vertical: "top", horizontal: "right" };
  const renderMenu = (
    <Menu
      anchorEl={anchorEl}
      anchorOrigin={menuPositions}
      id={menuId}
      keepMounted
      transformOrigin={menuPositions}
      open={isMenuOpen}
      onClose={handleMenuClose}
    >
      <Box
        display="flex!important"
        alignItems="center!important"
        component={MenuItem}
        onClick={handleMenuClose}
      >
        <Box
          component="img"
          marginRight="0.5rem"
          src={require("assets/img/icons/flags/DE.png").default}
          alt="de"
        />
        <span>Deutsch</span>
      </Box>
      <Box
        display="flex!important"
        alignItems="center!important"
        component={MenuItem}
        onClick={handleMenuClose}
      >
        <Box
          component="img"
          marginRight="0.5rem"
          src={require("assets/img/icons/flags/GB.png").default}
          alt="de"
        />
        <span>English (UK)</span>
      </Box>
      <Box
        display="flex!important"
        alignItems="center!important"
        component={MenuItem}
        onClick={handleMenuClose}
      >
        <Box
          component="img"
          marginRight="0.5rem"
          src={require("assets/img/icons/flags/FR.png").default}
          alt="de"
        />
        <span>Francais</span>
      </Box>
    </Menu>
  );

  return (
    <>
      <Button
        edge="end"
        aria-label="account of current user"
        aria-controls={menuId}
        aria-haspopup="true"
        onClick={handleProfileMenuOpen}
        variant="contained"
      >
        <Box
          component="img"
          marginRight="0.5rem"
          position="relative"
          top="-2px"
          src={require("assets/img/icons/flags/US.png").default}
          alt="de"
        />
        Flags
      </Button>
      {renderMenu}
    </>
  );
}

Colors

The best part is you can do this with any button variant, too:

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Copy
import React from "react";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
import Box from "@material-ui/core/Box";
import Button from "@material-ui/core/Button";
import Divider from "@material-ui/core/Divider";
import Menu from "@material-ui/core/Menu";
import MenuItem from "@material-ui/core/MenuItem";
// @material-ui/icons components

// core components
import componentStyles from "assets/theme/components/dropdowns/user-dropdown-alternative.js";

const useStyles = makeStyles(componentStyles);

export default function UserDropdown() {
  const classes = useStyles();
  const [anchorEl, setAnchorEl] = React.useState(null);

  const isMenuOpen = Boolean(anchorEl);

  const handleProfileMenuOpen = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleMenuClose = () => {
    setAnchorEl(null);
  };
  const dividerClasses = { root: classes.dividerRoot };
  const menuId = "dropdowns-user-dropdown-id";
  const menuPositions = { vertical: "top", horizontal: "right" };
  const renderMenu = (
    <Menu
      anchorEl={anchorEl}
      anchorOrigin={menuPositions}
      id={menuId}
      keepMounted
      transformOrigin={menuPositions}
      open={isMenuOpen}
      onClose={handleMenuClose}
    >
      <Box
        display="flex!important"
        alignItems="center!important"
        component={MenuItem}
        onClick={handleMenuClose}
      >
        <span>Action</span>
      </Box>
      <Box
        display="flex!important"
        alignItems="center!important"
        component={MenuItem}
        onClick={handleMenuClose}
      >
        <span>Another action</span>
      </Box>
      <Box
        display="flex!important"
        alignItems="center!important"
        component={MenuItem}
        onClick={handleMenuClose}
      >
        <span>Something else here</span>
      </Box>
      <Divider component="div" classes={dividerClasses} />
      <Box
        display="flex!important"
        alignItems="center!important"
        component={MenuItem}
        onClick={handleMenuClose}
      >
        <span>Separated link</span>
      </Box>
    </Menu>
  );

  return (
    <>
      <Button
        edge="end"
        aria-label="account of current user"
        aria-controls={menuId}
        aria-haspopup="true"
        onClick={handleProfileMenuOpen}
        color="primary"
        variant="contained"
      >
        Primary
      </Button>
      {renderMenu}
    </>
  );
}
Copy
import React from "react";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
import Box from "@material-ui/core/Box";
import Button from "@material-ui/core/Button";
import Divider from "@material-ui/core/Divider";
import Menu from "@material-ui/core/Menu";
import MenuItem from "@material-ui/core/MenuItem";
// @material-ui/icons components

// core components
import componentStyles from "assets/theme/components/dropdowns/user-dropdown-alternative.js";

const useStyles = makeStyles(componentStyles);

export default function UserDropdown() {
  const classes = useStyles();
  const [anchorEl, setAnchorEl] = React.useState(null);

  const isMenuOpen = Boolean(anchorEl);

  const handleProfileMenuOpen = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleMenuClose = () => {
    setAnchorEl(null);
  };
  const dividerClasses = { root: classes.dividerRoot };
  const menuId = "dropdowns-user-dropdown-id";
  const menuPositions = { vertical: "top", horizontal: "right" };
  const renderMenu = (
    <Menu
      anchorEl={anchorEl}
      anchorOrigin={menuPositions}
      id={menuId}
      keepMounted
      transformOrigin={menuPositions}
      open={isMenuOpen}
      onClose={handleMenuClose}
    >
      <Box
        display="flex!important"
        alignItems="center!important"
        component={MenuItem}
        onClick={handleMenuClose}
      >
        <span>Action</span>
      </Box>
      <Box
        display="flex!important"
        alignItems="center!important"
        component={MenuItem}
        onClick={handleMenuClose}
      >
        <span>Another action</span>
      </Box>
      <Box
        display="flex!important"
        alignItems="center!important"
        component={MenuItem}
        onClick={handleMenuClose}
      >
        <span>Something else here</span>
      </Box>
      <Divider component="div" classes={dividerClasses} />
      <Box
        display="flex!important"
        alignItems="center!important"
        component={MenuItem}
        onClick={handleMenuClose}
      >
        <span>Separated link</span>
      </Box>
    </Menu>
  );

  return (
    <>
      <Button
        edge="end"
        aria-label="account of current user"
        aria-controls={menuId}
        aria-haspopup="true"
        onClick={handleProfileMenuOpen}
        color="secondary"
        variant="contained"
      >
        Secondary
      </Button>
      {renderMenu}
    </>
  );
}
Copy
import React from "react";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
import Box from "@material-ui/core/Box";
import Button from "@material-ui/core/Button";
import Divider from "@material-ui/core/Divider";
import Menu from "@material-ui/core/Menu";
import MenuItem from "@material-ui/core/MenuItem";
// @material-ui/icons components

// core components
import componentStyles from "assets/theme/components/dropdowns/user-dropdown-alternative.js";
import componentStylesButtons from "assets/theme/components/button.js";

const useStyles = makeStyles(componentStyles);
const useStylesButtons = makeStyles(componentStylesButtons);

export default function UserDropdown() {
  const classes = { ...useStyles(), ...useStylesButtons() };
  const [anchorEl, setAnchorEl] = React.useState(null);

  const isMenuOpen = Boolean(anchorEl);

  const handleProfileMenuOpen = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleMenuClose = () => {
    setAnchorEl(null);
  };
  const dividerClasses = { root: classes.dividerRoot };
  const menuId = "dropdowns-user-dropdown-id";
  const menuPositions = { vertical: "top", horizontal: "right" };
  const renderMenu = (
    <Menu
      anchorEl={anchorEl}
      anchorOrigin={menuPositions}
      id={menuId}
      keepMounted
      transformOrigin={menuPositions}
      open={isMenuOpen}
      onClose={handleMenuClose}
    >
      <Box
        display="flex!important"
        alignItems="center!important"
        component={MenuItem}
        onClick={handleMenuClose}
      >
        <span>Action</span>
      </Box>
      <Box
        display="flex!important"
        alignItems="center!important"
        component={MenuItem}
        onClick={handleMenuClose}
      >
        <span>Another action</span>
      </Box>
      <Box
        display="flex!important"
        alignItems="center!important"
        component={MenuItem}
        onClick={handleMenuClose}
      >
        <span>Something else here</span>
      </Box>
      <Divider component="div" classes={dividerClasses} />
      <Box
        display="flex!important"
        alignItems="center!important"
        component={MenuItem}
        onClick={handleMenuClose}
      >
        <span>Separated link</span>
      </Box>
    </Menu>
  );
  const buttonClasses = {
    root: classes.buttonContainedSuccess,
  };
  return (
    <>
      <Button
        edge="end"
        aria-label="account of current user"
        aria-controls={menuId}
        aria-haspopup="true"
        onClick={handleProfileMenuOpen}
        variant="contained"
        classes={buttonClasses}
      >
        Success
      </Button>
      {renderMenu}
    </>
  );
}
Copy
import React from "react";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
import Box from "@material-ui/core/Box";
import Button from "@material-ui/core/Button";
import Divider from "@material-ui/core/Divider";
import Menu from "@material-ui/core/Menu";
import MenuItem from "@material-ui/core/MenuItem";
// @material-ui/icons components

// core components
import componentStyles from "assets/theme/components/dropdowns/user-dropdown-alternative.js";
import componentStylesButtons from "assets/theme/components/button.js";

const useStyles = makeStyles(componentStyles);
const useStylesButtons = makeStyles(componentStylesButtons);

export default function UserDropdown() {
  const classes = { ...useStyles(), ...useStylesButtons() };
  const [anchorEl, setAnchorEl] = React.useState(null);

  const isMenuOpen = Boolean(anchorEl);

  const handleProfileMenuOpen = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleMenuClose = () => {
    setAnchorEl(null);
  };
  const dividerClasses = { root: classes.dividerRoot };
  const menuId = "dropdowns-user-dropdown-id";
  const menuPositions = { vertical: "top", horizontal: "right" };
  const renderMenu = (
    <Menu
      anchorEl={anchorEl}
      anchorOrigin={menuPositions}
      id={menuId}
      keepMounted
      transformOrigin={menuPositions}
      open={isMenuOpen}
      onClose={handleMenuClose}
    >
      <Box
        display="flex!important"
        alignItems="center!important"
        component={MenuItem}
        onClick={handleMenuClose}
      >
        <span>Action</span>
      </Box>
      <Box
        display="flex!important"
        alignItems="center!important"
        component={MenuItem}
        onClick={handleMenuClose}
      >
        <span>Another action</span>
      </Box>
      <Box
        display="flex!important"
        alignItems="center!important"
        component={MenuItem}
        onClick={handleMenuClose}
      >
        <span>Something else here</span>
      </Box>
      <Divider component="div" classes={dividerClasses} />
      <Box
        display="flex!important"
        alignItems="center!important"
        component={MenuItem}
        onClick={handleMenuClose}
      >
        <span>Separated link</span>
      </Box>
    </Menu>
  );
  const buttonClasses = {
    root: classes.buttonContainedInfo,
  };
  return (
    <>
      <Button
        edge="end"
        aria-label="account of current user"
        aria-controls={menuId}
        aria-haspopup="true"
        onClick={handleProfileMenuOpen}
        variant="contained"
        classes={buttonClasses}
      >
        Info
      </Button>
      {renderMenu}
    </>
  );
}
Copy
import React from "react";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
import Box from "@material-ui/core/Box";
import Button from "@material-ui/core/Button";
import Divider from "@material-ui/core/Divider";
import Menu from "@material-ui/core/Menu";
import MenuItem from "@material-ui/core/MenuItem";
// @material-ui/icons components

// core components
import componentStyles from "assets/theme/components/dropdowns/user-dropdown-alternative.js";
import componentStylesButtons from "assets/theme/components/button.js";

const useStyles = makeStyles(componentStyles);
const useStylesButtons = makeStyles(componentStylesButtons);

export default function UserDropdown() {
  const classes = { ...useStyles(), ...useStylesButtons() };
  const [anchorEl, setAnchorEl] = React.useState(null);

  const isMenuOpen = Boolean(anchorEl);

  const handleProfileMenuOpen = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleMenuClose = () => {
    setAnchorEl(null);
  };
  const dividerClasses = { root: classes.dividerRoot };
  const menuId = "dropdowns-user-dropdown-id";
  const menuPositions = { vertical: "top", horizontal: "right" };
  const renderMenu = (
    <Menu
      anchorEl={anchorEl}
      anchorOrigin={menuPositions}
      id={menuId}
      keepMounted
      transformOrigin={menuPositions}
      open={isMenuOpen}
      onClose={handleMenuClose}
    >
      <Box
        display="flex!important"
        alignItems="center!important"
        component={MenuItem}
        onClick={handleMenuClose}
      >
        <span>Action</span>
      </Box>
      <Box
        display="flex!important"
        alignItems="center!important"
        component={MenuItem}
        onClick={handleMenuClose}
      >
        <span>Another action</span>
      </Box>
      <Box
        display="flex!important"
        alignItems="center!important"
        component={MenuItem}
        onClick={handleMenuClose}
      >
        <span>Something else here</span>
      </Box>
      <Divider component="div" classes={dividerClasses} />
      <Box
        display="flex!important"
        alignItems="center!important"
        component={MenuItem}
        onClick={handleMenuClose}
      >
        <span>Separated link</span>
      </Box>
    </Menu>
  );
  const buttonClasses = {
    root: classes.buttonContainedWarning,
  };
  return (
    <>
      <Button
        edge="end"
        aria-label="account of current user"
        aria-controls={menuId}
        aria-haspopup="true"
        onClick={handleProfileMenuOpen}
        variant="contained"
        classes={buttonClasses}
      >
        Warning
      </Button>
      {renderMenu}
    </>
  );
}
Copy
import React from "react";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
import Box from "@material-ui/core/Box";
import Button from "@material-ui/core/Button";
import Divider from "@material-ui/core/Divider";
import Menu from "@material-ui/core/Menu";
import MenuItem from "@material-ui/core/MenuItem";
// @material-ui/icons components

// core components
import componentStyles from "assets/theme/components/dropdowns/user-dropdown-alternative.js";
import componentStylesButtons from "assets/theme/components/button.js";

const useStyles = makeStyles(componentStyles);
const useStylesButtons = makeStyles(componentStylesButtons);

export default function UserDropdown() {
  const classes = { ...useStyles(), ...useStylesButtons() };
  const [anchorEl, setAnchorEl] = React.useState(null);

  const isMenuOpen = Boolean(anchorEl);

  const handleProfileMenuOpen = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleMenuClose = () => {
    setAnchorEl(null);
  };
  const dividerClasses = { root: classes.dividerRoot };
  const menuId = "dropdowns-user-dropdown-id";
  const menuPositions = { vertical: "top", horizontal: "right" };
  const renderMenu = (
    <Menu
      anchorEl={anchorEl}
      anchorOrigin={menuPositions}
      id={menuId}
      keepMounted
      transformOrigin={menuPositions}
      open={isMenuOpen}
      onClose={handleMenuClose}
    >
      <Box
        display="flex!important"
        alignItems="center!important"
        component={MenuItem}
        onClick={handleMenuClose}
      >
        <span>Action</span>
      </Box>
      <Box
        display="flex!important"
        alignItems="center!important"
        component={MenuItem}
        onClick={handleMenuClose}
      >
        <span>Another action</span>
      </Box>
      <Box
        display="flex!important"
        alignItems="center!important"
        component={MenuItem}
        onClick={handleMenuClose}
      >
        <span>Something else here</span>
      </Box>
      <Divider component="div" classes={dividerClasses} />
      <Box
        display="flex!important"
        alignItems="center!important"
        component={MenuItem}
        onClick={handleMenuClose}
      >
        <span>Separated link</span>
      </Box>
    </Menu>
  );
  const buttonClasses = {
    root: classes.buttonContainedError,
  };
  return (
    <>
      <Button
        edge="end"
        aria-label="account of current user"
        aria-controls={menuId}
        aria-haspopup="true"
        onClick={handleProfileMenuOpen}
        variant="contained"
        classes={buttonClasses}
      >
        Error
      </Button>
      {renderMenu}
    </>
  );
}