Nextjs Dropdowns
Toggle contextual overlays for displaying lists of links and more with the Nextjs dropdown plugin.
Examples
import React from "react";
// reactstrap components
import {
DropdownToggle,
DropdownMenu,
DropdownItem,
UncontrolledDropdown,
} from "reactstrap";
function Example() {
return (
<>
<UncontrolledDropdown>
<DropdownToggle
caret
color="secondary"
id="dropdownMenuButton"
type="button"
>
Regular
</DropdownToggle>
<DropdownMenu aria-labelledby="dropdownMenuButton">
<DropdownItem href="#pablo" onClick={(e) => e.preventDefault()}>
Action
</DropdownItem>
<DropdownItem href="#pablo" onClick={(e) => e.preventDefault()}>
Another action
</DropdownItem>
<DropdownItem href="#pablo" onClick={(e) => e.preventDefault()}>
Something else here
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
<UncontrolledDropdown>
<DropdownToggle caret color="default" id="navbarDropdownMenuLink2">
<img
alt="..."
src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/icons/flags/US.png"
></img>
Flags
</DropdownToggle>
<DropdownMenu aria-labelledby="navbarDropdownMenuLink2">
<li>
<DropdownItem href="#pablo" onClick={(e) => e.preventDefault()}>
<img
alt="..."
src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/icons/flags/DE.png"
></img>
Deutsch
</DropdownItem>
</li>
<li>
<DropdownItem href="#pablo" onClick={(e) => e.preventDefault()}>
<img
alt="..."
src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/icons/flags/GB.png"
></img>
English(UK)
</DropdownItem>
</li>
<li>
<DropdownItem href="#pablo" onClick={(e) => e.preventDefault()}>
<img
alt="..."
src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/icons/flags/FR.png"
></img>
Français
</DropdownItem>
</li>
</DropdownMenu>
</UncontrolledDropdown>
</>
);
}
export default Example;
Colors
The best part is you can do this with any button variant, too:
import React from "react";
// reactstrap components
import {
ButtonGroup,
DropdownToggle,
DropdownMenu,
DropdownItem,
} from "reactstrap";
function Example() {
return (
<>
<ButtonGroup>
<DropdownToggle caret color="primary" type="button">
Primary
</DropdownToggle>
<DropdownMenu>
<DropdownItem href="#pablo" onClick={(e) => e.preventDefault()}>
Action
</DropdownItem>
<DropdownItem href="#pablo" onClick={(e) => e.preventDefault()}>
Another action
</DropdownItem>
<DropdownItem href="#pablo" onClick={(e) => e.preventDefault()}>
Something else here
</DropdownItem>
<DropdownItem divider></DropdownItem>
<DropdownItem href="#pablo" onClick={(e) => e.preventDefault()}>
Separated link
</DropdownItem>
</DropdownMenu>
</ButtonGroup>{" "}
<ButtonGroup>
<DropdownToggle caret color="secondary" type="button">
Secondary
</DropdownToggle>
<DropdownMenu>
<DropdownItem href="#pablo" onClick={(e) => e.preventDefault()}>
Action
</DropdownItem>
<DropdownItem href="#pablo" onClick={(e) => e.preventDefault()}>
Another action
</DropdownItem>
<DropdownItem href="#pablo" onClick={(e) => e.preventDefault()}>
Something else here
</DropdownItem>
<DropdownItem divider></DropdownItem>
<DropdownItem href="#pablo" onClick={(e) => e.preventDefault()}>
Separated link
</DropdownItem>
</DropdownMenu>
</ButtonGroup>{" "}
<ButtonGroup>
<DropdownToggle caret color="success" type="button">
Success
</DropdownToggle>
<DropdownMenu>
<DropdownItem href="#pablo" onClick={(e) => e.preventDefault()}>
Action
</DropdownItem>
<DropdownItem href="#pablo" onClick={(e) => e.preventDefault()}>
Another action
</DropdownItem>
<DropdownItem href="#pablo" onClick={(e) => e.preventDefault()}>
Something else here
</DropdownItem>
<DropdownItem divider></DropdownItem>
<DropdownItem href="#pablo" onClick={(e) => e.preventDefault()}>
Separated link
</DropdownItem>
</DropdownMenu>
</ButtonGroup>{" "}
<ButtonGroup>
<DropdownToggle caret color="info" type="button">
Info
</DropdownToggle>
<DropdownMenu>
<DropdownItem href="#pablo" onClick={(e) => e.preventDefault()}>
Action
</DropdownItem>
<DropdownItem href="#pablo" onClick={(e) => e.preventDefault()}>
Another action
</DropdownItem>
<DropdownItem href="#pablo" onClick={(e) => e.preventDefault()}>
Something else here
</DropdownItem>
<DropdownItem divider></DropdownItem>
<DropdownItem href="#pablo" onClick={(e) => e.preventDefault()}>
Separated link
</DropdownItem>
</DropdownMenu>
</ButtonGroup>{" "}
<ButtonGroup>
<DropdownToggle caret color="warning" type="button">
Warning
</DropdownToggle>
<DropdownMenu>
<DropdownItem href="#pablo" onClick={(e) => e.preventDefault()}>
Action
</DropdownItem>
<DropdownItem href="#pablo" onClick={(e) => e.preventDefault()}>
Another action
</DropdownItem>
<DropdownItem href="#pablo" onClick={(e) => e.preventDefault()}>
Something else here
</DropdownItem>
<DropdownItem divider></DropdownItem>
<DropdownItem href="#pablo" onClick={(e) => e.preventDefault()}>
Separated link
</DropdownItem>
</DropdownMenu>
</ButtonGroup>{" "}
<ButtonGroup>
<DropdownToggle caret color="danger" type="button">
Danger
</DropdownToggle>
<DropdownMenu>
<DropdownItem href="#pablo" onClick={(e) => e.preventDefault()}>
Action
</DropdownItem>
<DropdownItem href="#pablo" onClick={(e) => e.preventDefault()}>
Another action
</DropdownItem>
<DropdownItem href="#pablo" onClick={(e) => e.preventDefault()}>
Something else here
</DropdownItem>
<DropdownItem divider></DropdownItem>
<DropdownItem href="#pablo" onClick={(e) => e.preventDefault()}>
Separated link
</DropdownItem>
</DropdownMenu>
</ButtonGroup>{" "}
</>
);
}
export default Example;
Props
If you want to see more examples and properties please check the official Reactstrap Documentation for dropdowns and also official Reactstrap Documentation for button dropdowns.