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/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/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/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/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.