Reactstrap Dropdowns

Toggle contextual overlays for displaying lists of links and more with the Bootstrap 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;

Multilevel Dropdown PRO

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

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:

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.