Dropdowns

We've decided to create this component to make it easier for you to create a dropdown.

Styles

You will find the styles for this component in
styles/jss/nextjs-material-kit-pro/components/customDropdownStyle.js.

Examples

Single button dropdown

import React from "react";
// @material-ui/core components
// core components
import CustomDropdown from "components/CustomDropdown/CustomDropdown.js";

export default function Dropdown() {
  return (
    <div>
      <CustomDropdown
        buttonText="Dropdown Button"
        dropdownList={[
          "Action",
          "Another action",
          "Something else here",
          { divider: true },
          "Separated link",
          { divider: true },
          "One more separated link"
        ]}
      />
    </div>
  );
}

Rendered with an <a> component:

import React from "react";
// @material-ui/core components
// core components
import CustomDropdown from "components/CustomDropdown/CustomDropdown.js";

export default function Dropdown() {
  return (
    <div>
      <CustomDropdown
        dropdownHeader="Dropdown header"
        buttonText="Dropdown Link"
        buttonProps={{
          href: "#pablo"
        }}
        dropdownList={[
          "Action",
          "Another action",
          "Something else here",
          { divider: true },
          "Separated link",
          { divider: true },
          "One more separated link"
        ]}
      />
    </div>
  );
}

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

import React from "react";
// @material-ui/core components
// core components
import CustomDropdown from "components/CustomDropdown/CustomDropdown.js";

export default function Dropdown() {
  return (
    <div>
      <CustomDropdown
        buttonText="Primary"
        buttonProps={{
          color: "primary"
        }}
        dropdownList={[
          "Action",
          "Another action",
          "Something else here",
          { divider: true },
          "Separated link"
        ]}
      />
      <CustomDropdown
        buttonText="Secondary"
        buttonProps={{
          color: "secondary"
        }}
        dropdownList={[
          "Action",
          "Another action",
          "Something else here",
          { divider: true },
          "Separated link"
        ]}
      />
      <CustomDropdown
        buttonText="Success"
        buttonProps={{
          color: "success"
        }}
        dropdownList={[
          "Action",
          "Another action",
          "Something else here",
          { divider: true },
          "Separated link"
        ]}
      />
      <CustomDropdown
        buttonText="Info"
        buttonProps={{
          color: "info"
        }}
        dropdownList={[
          "Action",
          "Another action",
          "Something else here",
          { divider: true },
          "Separated link"
        ]}
      />
      <CustomDropdown
        buttonText="Warning"
        buttonProps={{
          color: "warning"
        }}
        dropdownList={[
          "Action",
          "Another action",
          "Something else here",
          { divider: true },
          "Separated link"
        ]}
      />
      <CustomDropdown
        buttonText="Danger"
        buttonProps={{
          color: "danger"
        }}
        dropdownList={[
          "Action",
          "Another action",
          "Something else here",
          { divider: true },
          "Separated link"
        ]}
      />
    </div>
  );
}

Split button dropdowns

import React from "react";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
// core components
import CustomDropdown from "components/CustomDropdown/CustomDropdown.js";
import Button from "components/CustomButtons/Button.js";

import style from "styles/jss/nextjs-material-kit-pro/buttonGroupStyle.js";

const useStyles = makeStyles(style);

export default function Dropdown() {
  const classes = useStyles();
  return (
    <div>
      <div className={classes.buttonGroup}>
        <Button color="primary" className={classes.firstButton}>
          PRIMARY
        </Button>
        <CustomDropdown
          buttonProps={{
            color: "primary",
            className: classes.lastButton
          }}
          dropdownList={[
            "Action",
            "Another action",
            "Something else here",
            { divider: true },
            "Separated link"
          ]}
        />
      </div>
      <div className={classes.buttonGroup}>
        <Button color="secondary" className={classes.firstButton}>
          Secondary
        </Button>
        <CustomDropdown
          hoverColor="dark"
          buttonProps={{
            color: "secondary",
            className: classes.lastButton
          }}
          dropdownList={[
            "Action",
            "Another action",
            "Something else here",
            { divider: true },
            "Separated link"
          ]}
        />
      </div>
      <div className={classes.buttonGroup}>
        <Button color="success" className={classes.firstButton}>
          Success
        </Button>
        <CustomDropdown
          hoverColor="success"
          buttonProps={{
            color: "success",
            className: classes.lastButton
          }}
          dropdownList={[
            "Action",
            "Another action",
            "Something else here",
            { divider: true },
            "Separated link"
          ]}
        />
      </div>
      <div className={classes.buttonGroup}>
        <Button color="info" className={classes.firstButton}>
          Info
        </Button>
        <CustomDropdown
          hoverColor="info"
          buttonProps={{
            color: "info",
            className: classes.lastButton
          }}
          dropdownList={[
            "Action",
            "Another action",
            "Something else here",
            { divider: true },
            "Separated link"
          ]}
        />
      </div>
      <div className={classes.buttonGroup}>
        <Button color="warning" className={classes.firstButton}>
          Warning
        </Button>
        <CustomDropdown
          hoverColor="warning"
          buttonProps={{
            color: "warning",
            className: classes.lastButton
          }}
          dropdownList={[
            "Action",
            "Another action",
            "Something else here",
            { divider: true },
            "Separated link"
          ]}
        />
      </div>
      <div className={classes.buttonGroup}>
        <Button color="danger" className={classes.firstButton}>
          Danger
        </Button>
        <CustomDropdown
          hoverColor="danger"
          buttonProps={{
            color: "danger",
            className: classes.lastButton
          }}
          dropdownList={[
            "Action",
            "Another action",
            "Something else here",
            { divider: true },
            "Separated link"
          ]}
        />
      </div>
    </div>
  );
}

Dropup variation

By adding the prop dropup you can change the menu to be rendered above instead of below.

import React from "react";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
// core components
import CustomDropdown from "components/CustomDropdown/CustomDropdown.js";
import Button from "components/CustomButtons/Button.js";

import style from "styles/jss/nextjs-material-kit-pro/buttonGroupStyle.js";

const useStyles = makeStyles(style);

export default function Dropdown() {
  const classes = useStyles();
  return (
    <div>
      <CustomDropdown
        dropup
        hoverColor="dark"
        buttonText="Dropup"
        buttonProps={{
          color: "secondary"
        }}
        dropdownList={[
          "Action",
          "Another action",
          "Something else here",
          { divider: true },
          "Separated link"
        ]}
      />
      <div className={classes.buttonGroup}>
        <Button color="secondary" className={classes.firstButton}>
          Split dropup
        </Button>
        <CustomDropdown
          dropup
          hoverColor="dark"
          buttonProps={{
            color: "secondary",
            className: classes.lastButton
          }}
          dropdownList={[
            "Action",
            "Another action",
            "Something else here",
            { divider: true },
            "Separated link"
          ]}
        />
      </div>
    </div>
  );
}

Multilevel Dropdown

import React from "react";
// @material-ui/core components
// @material-ui/icons
// core components
import GridContainer from "components/Grid/GridContainer.js";
import GridItem from "components/Grid/GridItem.js";
import CustomDropdown from "components/CustomDropdown/CustomDropdown.js";

export default function Example() {
  return (
    <GridContainer>
      <GridItem xs={12} sm={12} md={8} lg={6}>
        <CustomDropdown
          dropdownHeader="Dropdown header"
          buttonText="Multilevel Dropdown"
          buttonProps={{
            round: true,
            block: true,
            color: "info"
          }}
          dropPlacement="bottom"
          dropdownList={[
            "Action",
            "Another action",
            "Something else here",
            { divider: true },
            "Separated link",
            { divider: true },
            "One more separated link",
            <CustomDropdown
              data-ref="multi"
              key={96586}
              innerDropDown
              buttonText="Submenu"
              buttonProps={{
                simple: true,
                block: true
              }}
              dropPlacement="right-start"
              dropdownList={[
                "Submenu action",
                "Submenu action",
                <CustomDropdown
                  data-ref="multi"
                  key={965816}
                  innerDropDown
                  buttonText="Second submenu"
                  buttonProps={{
                    simple: true
                  }}
                  dropPlacement="right-start"
                  dropdownList={[
                    "Submenu action 1",
                    "Submenu action 2"
                  ]}
                />
              ]}
            />
          ]}
        />
      </GridItem>
    </GridContainer>
  );
}

Props

CustomDropdown.defaultProps = {
  caret: true,
  dropup: false,
  hoverColor: "primary"
};

CustomDropdown.propTypes = {
  hoverColor: PropTypes.oneOf([
    "dark",
    "primary",
    "info",
    "success",
    "warning",
    "danger",
    "rose"
  ]),
  buttonText: PropTypes.node,
  buttonIcon: PropTypes.object,
  dropdownList: PropTypes.array,
  buttonProps: PropTypes.object,
  dropup: PropTypes.bool,
  dropdownHeader: PropTypes.node,
  rtlActive: PropTypes.bool,
  caret: PropTypes.bool,
  dropPlacement: PropTypes.oneOf([
    "bottom",
    "top",
    "right",
    "left",
    "bottom-start",
    "bottom-end",
    "top-start",
    "top-end",
    "right-start",
    "right-end",
    "left-start",
    "left-end"
  ]),
  noLiPadding: PropTypes.bool,
  innerDropDown: PropTypes.bool,
  navDropdown: PropTypes.bool,
  // This is a function that returns the clicked menu item
  onClick: PropTypes.func
};