Material-UI Dropdowns

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

Examples

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}
    </>
  );
}

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:

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}
    </>
  );
}

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}
    </>
  );
}

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}
    </>
  );
}

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}
    </>
  );
}

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}
    </>
  );
}

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}
    </>
  );
}