React Bootstrap — Dropdown Customization

React Bootstrap is one version of Bootstrap made for React.

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

In this article, we’ll look at how to customize React Bootstrap dropdowns.

Drop Directions

We can change the direction that the drop-down menu is shown.

For example, we can write:

import React from "react";
import Dropdown from "react-bootstrap/Dropdown";
import DropdownButton from "react-bootstrap/DropdownButton";
import ButtonGroup from "react-bootstrap/ButtonGroup";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <>
      {["up", "down", "left", "right"].map(direction => (
        <DropdownButton
          as={ButtonGroup}
          key={direction}
          drop={direction}
          variant="secondary"
          title={`Drop ${direction}`}
        >
          <Dropdown.Item eventKey="1">foo</Dropdown.Item>
          <Dropdown.Item eventKey="2">bar</Dropdown.Item>
          <Dropdown.Divider />
          <Dropdown.Item eventKey="3">baz</Dropdown.Item>
        </DropdownButton>
      ))}
      }
    </>
  );
}

We set the direction with the drop prop.

It can be 'up' , 'down' , 'left' , or 'right' .

Then the dropdown will be shown above, below, to the left, or the right respectively.

Dropdown Items

We can add dropdown items as links or buttons.

To change our preference, we can use the as prop.

For instance, we can write:

import React from "react";
import Dropdown from "react-bootstrap/Dropdown";
import DropdownButton from "react-bootstrap/DropdownButton";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <>
      <DropdownButton title="Dropdown button">
        <Dropdown.Item as="button">foo</Dropdown.Item>
        <Dropdown.Item as="button">bar</Dropdown.Item>
        <Dropdown.Item as="button">baz</Dropdown.Item>
      </DropdownButton>
    </>
  );
}

to create the dropdown with buttons in the menu as indicated in the as prop.

Menu Alignment

The menu alignment can be changed.

We can put it on the right side on the screen with the alignRight prop.

For example, we can write:

import React from "react";
import Dropdown from "react-bootstrap/Dropdown";
import DropdownButton from "react-bootstrap/DropdownButton";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <>
      <DropdownButton title="Dropdown button" alignRight>
        <Dropdown.Item as="button">foo</Dropdown.Item>
        <Dropdown.Item as="button">bar</Dropdown.Item>
        <Dropdown.Item as="button">baz</Dropdown.Item>
      </DropdownButton>
    </>
  );
}

We add the prop to make the dropdown shown on the right.

Menu Headers

Menu can have their own headers.

To add them, we can use the Dropdown.Menu component.

For example, we can write:

import React from "react";
import Dropdown from "react-bootstrap/Dropdown";
import DropdownButton from "react-bootstrap/DropdownButton";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <>
      <DropdownButton title="Dropdown button" alignRight>
        <Dropdown.Header>Dropdown header</Dropdown.Header>
        <Dropdown.Item as="button">foo</Dropdown.Item>
        <Dropdown.Item as="button">bar</Dropdown.Item>
        <Dropdown.Item as="button">baz</Dropdown.Item>
      </DropdownButton>
    </>
  );
}

to add a header.

With the long form of the Dropdown component, we can write:

import React from "react";
import Dropdown from "react-bootstrap/Dropdown";
import ButtonGroup from "react-bootstrap/ButtonGroup";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <>
      <Dropdown as={ButtonGroup}>
        <Dropdown.Toggle variant="success">Dropdown Button</Dropdown.Toggle>
        <Dropdown.Menu>
          <Dropdown.Header>Dropdown header</Dropdown.Header>
          <Dropdown.Item eventKey="2">foo</Dropdown.Item>
          <Dropdown.Item eventKey="3">bar</Dropdown.Item>
        </Dropdown.Menu>
      </Dropdown>
    </>
  );
}

We have the Dropdown.header in the Dropdown.Menu .

Menu Dividers

The Dropdown.Divider component leys us add menu dividers.

For example, we can write:

import React from "react";
import Dropdown from "react-bootstrap/Dropdown";
import ButtonGroup from "react-bootstrap/ButtonGroup";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <>
      <Dropdown as={ButtonGroup}>
        <Dropdown.Toggle variant="success">Dropdown Button</Dropdown.Toggle>
        <Dropdown.Menu>
          <Dropdown.Item eventKey="1">baz</Dropdown.Item>
          <Dropdown.Divider />
          <Dropdown.Item eventKey="2">foo</Dropdown.Item>
          <Dropdown.Item eventKey="3">bar</Dropdown.Item>
        </Dropdown.Menu>
      </Dropdown>
    </>
  );
}

We added the Dropdown.Divider in our Dropdown.Menu to separate the entries.

Customization

We can customize the styles in many ways.

For instance, we can write:

import React from "react";
import Dropdown from "react-bootstrap/Dropdown";
import ButtonGroup from "react-bootstrap/ButtonGroup";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <>
      <style type="text/css">
        {`
        .super-colors {
          background: rgb(34,193,195);
          background: linear-gradient(0deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%);
        }
      `}
      </style>
      <Dropdown as={ButtonGroup}>
        <Dropdown.Toggle variant="success">Dropdown Button</Dropdown.Toggle>
        <Dropdown.Menu className="super-colors">
          <Dropdown.Item eventKey="1">baz</Dropdown.Item>
          <Dropdown.Divider />
          <Dropdown.Item eventKey="2">foo</Dropdown.Item>
          <Dropdown.Item eventKey="3">bar</Dropdown.Item>
        </Dropdown.Menu>
      </Dropdown>
    </>
  );
}

We have the super-colors class with a gradient as the background of the menu.

The className prop will set the class name of the rendered element as we expect.

Custom Dropdown Components

We can create our custom dropdown component.

For instance, we can write:

import React from "react";
import Dropdown from "react-bootstrap/Dropdown";
import ButtonGroup from "react-bootstrap/ButtonGroup";
import FormControl from "react-bootstrap/FormControl";
import "bootstrap/dist/css/bootstrap.min.css";

const CustomToggle = React.forwardRef(({ children, onClick }, ref) => (
  <div
    ref={ref}
    onClick={e => {
      e.preventDefault();
      onClick(e);
    }}
  >
    {children}
  </div>
));

const CustomMenu = React.forwardRef(
  ({ children, style, className, "aria-labelledby": labeledBy }, ref) => {
    const [value, setValue] = React.useState("");

    return (
      <div
        ref={ref}
        style={style}
        className={className}
        aria-labelledby={labeledBy}
      >
        <FormControl
          autoFocus
          className="mx-3 my-2 w-auto"
          placeholder="search"
          onChange={e => setValue(e.target.value)}
          value={value}
        />
        <ul className="list-unstyled">
          {React.Children.toArray(children).filter(
            child =>
              !value || child.props.children.toLowerCase().startsWith(value)
          )}
        </ul>
      </div>
    );
  }
);

export default function App() {
  return (
    <>
      <Dropdown as={ButtonGroup}>
        <Dropdown.Toggle as={CustomToggle}>Dropdown Button</Dropdown.Toggle>
        <Dropdown.Menu as={CustomMenu}>
          <Dropdown.Item eventKey="1">baz</Dropdown.Item>
          <Dropdown.Item eventKey="2">foo</Dropdown.Item>
          <Dropdown.Item eventKey="3">bar</Dropdown.Item>
        </Dropdown.Menu>
      </Dropdown>
    </>
  );
}

We created our own CustomToggle component to render our own toggle.

We’ve to pass the ref from the props to our toggle component so React Boostrap can use for a toggle.

Then run the onClick function from the props to open the menu.

children has the content of the toggle.

Likewise, we also created a CustomMenu component.

We get the children , style and className from the props and apply them.

Also, we added a FormControl component to set the value state when we type.

When we type, then items on the menu are filtered by the search term.

So only the entries that match what we type in are displayed.

Conclusion

There are many ways to customize a dropdown menu.

We can make our own toggle and menu.