Reactstrap — Dropdowns

Reactstrap is a version Bootstrap made for React.

It’s a set of React components that have Boostrap styles.

In this article, we’ll look at how to add dropdowns with Reactstrap.

Dropdowns

We can add dropdowns with the Dropdown , DropdownToggle , DropdownMenu and DropdownItem components.

For example, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import {
  Dropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem
} from "reactstrap";

export default function App() {
  const [dropdownOpen, setDropdownOpen] = React.useState(false);

  const toggle = () => setDropdownOpen(prevState => !prevState);

  return (
    <Dropdown isOpen={dropdownOpen} toggle={toggle}>
      <DropdownToggle caret>Dropdown</DropdownToggle>
      <DropdownMenu>
        <DropdownItem header>Header</DropdownItem>
        <DropdownItem>Action</DropdownItem>
        <DropdownItem disabled>Action (disabled)</DropdownItem>
        <DropdownItem divider />
        <DropdownItem>Action</DropdownItem>
        <DropdownItem>Action</DropdownItem>
        <DropdownItem>Action</DropdownItem>
      </DropdownMenu>
    </Dropdown>
  );
}

We have the Dropdown component with the isOpen prop to control its opening state.

toggle has the function to toggle the dropdownOpen state to toggle the dropdown.

DropdownMenu has the menu.

DropdownItem has the menu item.

The divider prop turns it into a divider.

The disabled prop makes the action disabled.

DropdownToggle has the dropdown toggle.

Alignment

We can align the menu with some props.

To make it align to the right, we can use the right prop on the DropdownMenu :

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import {
  Dropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem
} from "reactstrap";

export default function App() {
  const [dropdownOpen, setDropdownOpen] = React.useState(false);

  const toggle = () => setDropdownOpen(prevState => !prevState);

  return (
    <Dropdown isOpen={dropdownOpen} toggle={toggle}>
      <DropdownToggle caret>Dropdown</DropdownToggle>
      <DropdownMenu right>
        <DropdownItem header>Header</DropdownItem>
        <DropdownItem>Action</DropdownItem>
        <DropdownItem disabled>Action (disabled)</DropdownItem>
        <DropdownItem divider />
        <DropdownItem>Action</DropdownItem>
        <DropdownItem>Action</DropdownItem>
        <DropdownItem>Action</DropdownItem>
      </DropdownMenu>
    </Dropdown>
  );
}

Menu Headers

The header prop adds the menu header as we can see from the menu above.

Sizing

The size of the button can change.

For example, we can set the size to lg to make the button large:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import {
  Dropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem
} from "reactstrap";

export default function App() {
  const [dropdownOpen, setDropdownOpen] = React.useState(false);

  const toggle = () => setDropdownOpen(prevState => !prevState);

  return (
    <Dropdown isOpen={dropdownOpen} toggle={toggle} size="lg">
      <DropdownToggle caret>Dropdown</DropdownToggle>
      <DropdownMenu right>
        <DropdownItem header>Header</DropdownItem>
        <DropdownItem>Action</DropdownItem>
        <DropdownItem disabled>Action (disabled)</DropdownItem>
        <DropdownItem divider />
        <DropdownItem>Action</DropdownItem>
        <DropdownItem>Action</DropdownItem>
        <DropdownItem>Action</DropdownItem>
      </DropdownMenu>
    </Dropdown>
  );
}

The size prop is added to the Dropdown .

Custom Dropdown

We can put different elements into the DropdownMenu component.

For example, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import {
  Dropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem
} from "reactstrap";

export default function App() {
  const [dropdownOpen, setDropdownOpen] = React.useState(false);

  const toggle = () => setDropdownOpen(prevState => !prevState);

  return (
    <Dropdown isOpen={dropdownOpen} toggle={toggle}>
      <DropdownToggle
        tag="span"
        data-toggle="dropdown"
        aria-expanded={dropdownOpen}
      >
        Custom Dropdown Content
      </DropdownToggle>
      <DropdownMenu className="p-3">
        <div onClick={toggle}>item</div>
        <div onClick={toggle}>item</div>
        <div onClick={toggle}>item</div>
        <div onClick={toggle}>item</div>
      </DropdownMenu>
    </Dropdown>
  );
}

We have divs inside the DropdownMenu instead of DropdownItem s.

Uncontrolled Dropdown

We can add uncontrolled dropdowns to our app.

They’re useful for situations when we don’t have control the dropdown state programmatically.

For example, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import {
  UncontrolledDropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem
} from "reactstrap";

export default function App() {
  return (
    <UncontrolledDropdown>
      <DropdownToggle caret>Dropdown</DropdownToggle>
      <DropdownMenu>
        <DropdownItem header>Header</DropdownItem>
        <DropdownItem disabled>Action</DropdownItem>
        <DropdownItem>Action</DropdownItem>
        <DropdownItem divider />
        <DropdownItem>Action</DropdownItem>
      </DropdownMenu>
    </UncontrolledDropdown>
  );
}

We use the UncontrolledDropdown component to add an uncontrolled dropdown.

Drop Direction Variations

Dropdowns can be displayed in different directions.

We can change it with the direction prop.

For example, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import {
  Dropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem
} from "reactstrap";

export default function App() {
  const [isOpenLeft, setDropdownOpenLeft] = React.useState(false);
  const [isOpenUp, setDropdownOpenUp] = React.useState(false);
  const [isOpenRight, setDropdownOpenRight] = React.useState(false);

  const toggleLeft = () => setDropdownOpenLeft(prevState => !prevState);
  const toggleRight = () => setDropdownOpenRight(prevState => !prevState);
  const toggleUp = () => setDropdownOpenUp(prevState => !prevState);

  return (
    <>
      <Dropdown direction="up" isOpen={isOpenUp} toggle={toggleUp}>
        <DropdownToggle caret>Dropup</DropdownToggle>
        <DropdownMenu>
          <DropdownItem>Action</DropdownItem>
          <DropdownItem>Action</DropdownItem>
        </DropdownMenu>
      </Dropdown>

      <Dropdown direction="left" isOpen={isOpenLeft} toggle={toggleLeft}>
        <DropdownToggle caret>Dropleft</DropdownToggle>
        <DropdownMenu>
          <DropdownItem>Action</DropdownItem>
          <DropdownItem>Action</DropdownItem>
        </DropdownMenu>
      </Dropdown>

      <Dropdown direction="right" isOpen={isOpenRight} toggle={toggleRight}>
        <DropdownToggle caret>Dropright</DropdownToggle>
        <DropdownMenu>
          <DropdownItem>Action</DropdownItem>
          <DropdownItem>Action</DropdownItem>
        </DropdownMenu>
      </Dropdown>
    </>
  );
}

We set the direction with the direction prop.

The caret adds the arrow in the correct direction.

Conclusion

We can add dropdowns that are displayed the way we want.

They can be displayed in any direction.