Reactstrap Dropdowns

Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.

Examples

Action Another action Something else here
Flags
Copy
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;

Multilevel Dropdown PRO

Action Another action Submenu
Submenu action Submenu action Subsubmenu
Subsubmenu action 1 Subsubmenu action 2
Second subsubmenu
Subsubmenu action 1 Subsubmenu action 2
Copy
import React from "react";

// reactstrap components
import {
  DropdownToggle,
  DropdownMenu,
  DropdownItem,
  UncontrolledDropdown
} from "reactstrap";

// Core Components

function Example() {
  return (
    <>
      <UncontrolledDropdown>
        <DropdownToggle
          block
          color="primary"
          id="multiDropdownMenu"
          type="button"
        >
          Click here
        </DropdownToggle>
        <DropdownMenu aria-labelledby="multiDropdownMenu">
          <DropdownItem href="#pablo" onClick={(e) => e.preventDefault()}>
            Action
          </DropdownItem>
          <DropdownItem href="#pablo" onClick={(e) => e.preventDefault()}>
            Another action
          </DropdownItem>
          <UncontrolledDropdown className="d-block">
            <DropdownToggle
              caret
              className="dropdown-item"
              color="default"
              tag="a"
            >
              Submenu
            </DropdownToggle>
            <DropdownMenu>
              <DropdownItem
                href="#pablo"
                onClick={(e) => e.preventDefault()}
              >
                Submenu action
              </DropdownItem>
              <DropdownItem
                href="#pablo"
                onClick={(e) => e.preventDefault()}
              >
                Submenu action
              </DropdownItem>
              <UncontrolledDropdown className="d-block">
                <DropdownToggle
                  caret
                  className="dropdown-item"
                  color="default"
                  id="multiSubMenu1"
                  tag="a"
                >
                  Subsubmenu
                </DropdownToggle>
                <DropdownMenu aria-labelledby="multiSubMenu1">
                  <DropdownItem
                    href="#pablo"
                    onClick={(e) => e.preventDefault()}
                  >
                    Subsubmenu action 1
                  </DropdownItem>
                  <DropdownItem
                    href="#pablo"
                    onClick={(e) => e.preventDefault()}
                  >
                    Subsubmenu action 2
                  </DropdownItem>
                </DropdownMenu>
              </UncontrolledDropdown>
              <UncontrolledDropdown className="d-block">
                <DropdownToggle
                  caret
                  className="dropdown-item"
                  color="default"
                  id="multiSubMenu2"
                  tag="a"
                >
                  Second subsubmenu
                </DropdownToggle>
                <DropdownMenu aria-labelledby="multiSubMenu2">
                  <DropdownItem
                    href="#pablo"
                    onClick={(e) => e.preventDefault()}
                  >
                    Subsubmenu action 1
                  </DropdownItem>
                  <DropdownItem
                    href="#pablo"
                    onClick={(e) => e.preventDefault()}
                  >
                    Subsubmenu action 2
                  </DropdownItem>
                </DropdownMenu>
              </UncontrolledDropdown>
            </DropdownMenu>
          </UncontrolledDropdown>
        </DropdownMenu>
      </UncontrolledDropdown>
    </>
  );
}

export default Example;

Dropup

My profile Settings Activity Support
Logout
Copy
import React from "react";

// reactstrap components
import {
  DropdownToggle,
  DropdownMenu,
  DropdownItem,
  UncontrolledDropdown,
} from "reactstrap";

function Example() {
  return (
    <>
      <UncontrolledDropdown direction="up">
        <DropdownToggle color="primary" role="button">
          <span>Click me</span>
        </DropdownToggle>
        <DropdownMenu>
          <DropdownItem>
            <i className=" ni ni-single-02"></i>
            <span>My profile</span>
          </DropdownItem>
          <DropdownItem>
            <i className=" ni ni-settings-gear-65"></i>
            <span>Settings</span>
          </DropdownItem>
          <DropdownItem>
            <i className=" ni ni-calendar-grid-58"></i>
            <span>Activity</span>
          </DropdownItem>
          <DropdownItem>
            <i className=" ni ni-support-16"></i>
            <span>Support</span>
          </DropdownItem>
          <DropdownItem divider></DropdownItem>
          <DropdownItem>
            <i className=" ni ni-user-run"></i>
            <span>Logout</span>
          </DropdownItem>
        </DropdownMenu>
      </UncontrolledDropdown>
    </>
  );
}

export default Example;

Colors

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

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Copy
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.