We've decided to create this component to make it easier for you to create a dropdown.
You will find the styles for this component instyles/jss/nextjs-material-kit-pro/components/customDropdownStyle.js.
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>
);
}
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>
);
}
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>
);
}
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>
);
}
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
};