React Bootstrap Dropdowns

React Dropdowns - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

React Bootstrap dropdown is a toggleable menu embedding additional links or content. It allows you to construct advanced navigation and link categorization.

In case of more complicated navigations systems dropdowns are the essential elements providing you with possibility of placing all the most relevant links in our navigation bar (or other component acting as navigation - such as SideNav)

Aside from being not only highly functional, MDB dropdowns are also extraordinary visually attractive. It gives them this characteristic Material Design effects, like shadows, living colors or charming waves effect after opening a link.

They’re toggled by clicking, not by hovering; this is an intentional design decision. Why?

MDB is "mobile first" framework so, we avoid mixing functional elements and interaction by hovering because it decreases User Experience of users of mobile devices.

Google Material Design guidelines recommend the same approach.

Basic example

Action Another action Something else here
Separated link 
        
            
          import React from "react";
          import { 
            MDBDropdown, 
            MDBDropdownToggle, 
            MDBDropdownMenu, 
            MDBDropdownItem 
          } from "mdbreact";

          const DropdownPage = () => {
            return (
              <MDBDropdown>
                <MDBDropdownToggle caret color="primary">
                  MDBDropdown
                </MDBDropdownToggle>
                <MDBDropdownMenu basic>
                  <MDBDropdownItem>Action</MDBDropdownItem>
                  <MDBDropdownItem>Another Action</MDBDropdownItem>
                  <MDBDropdownItem>Something else here</MDBDropdownItem>
                  <MDBDropdownItem divider />
                  <MDBDropdownItem>Separated link</MDBDropdownItem>
                </MDBDropdownMenu>
              </MDBDropdown>
            );
          }

          export default DropdownPage;

Split button

You can split your button by using MDBBtnGroup component.

Action Another action Something else here
Separated link 
        
            
          import React from "react";
          import { 
            MDBDropdown, 
            MDBDropdownToggle, 
            MDBBtn, 
            MDBBtnGroup, 
            MDBDropdownMenu, 
            MDBDropdownItem 
          } from "mdbreact";

          const DropdownPage = () => {
            return (
              <MDBBtnGroup>
                <MDBBtn color="danger">
                  DANGER
                </MDBBtn>
                <MDBDropdown>
                  <MDBDropdownToggle caret color="danger" />
                  <MDBDropdownMenu color="danger">
                    <MDBDropdownItem>Action</MDBDropdownItem>
                    <MDBDropdownItem>Another Action</MDBDropdownItem>
                    <MDBDropdownItem>Something else here</MDBDropdownItem>
                    <MDBDropdownItem>Something else here</MDBDropdownItem>
                  </MDBDropdownMenu>
                </MDBDropdown>
              </MDBBtnGroup>
            );
          }

          export default DropdownPage;

Material dropdowns MDB Pro component

Action Another action Something else here Something else here
Action Another action Something else here Something else here
Action Another action Something else here Something else here
Action Another action Something else here Something else here
Action Another action Something else here Something else here
Action Another action Something else here Something else here
Action Another action Something else here Something else here
Action Another action Something else here Something else here
Action Another action Something else here Something else here 
        
            
            import React, { Fragment } from "react";
            import { 
              MDBDropdown, 
              MDBDropdownToggle, 
              MDBDropdownMenu, 
              MDBDropdownItem 
            } from "mdbreact";

            const DropdownPage = () => {
              return (
                <Fragment>
                  <MDBDropdown>
                    <MDBDropdownToggle caret color="primary">
                      Dropdown
                    </MDBDropdownToggle>
                    <MDBDropdownMenu  basic >
                      <MDBDropdownItem>Action</MDBDropdownItem>
                      <MDBDropdownItem>Another Action</MDBDropdownItem>
                      <MDBDropdownItem>Something else here</MDBDropdownItem>
                      <MDBDropdownItem divider />
                      <MDBDropdownItem>Separated link</MDBDropdownItem>
                    </MDBDropdownMenu>
                  </MDBDropdown>
                  <MDBDropdown>
                    <MDBDropdownToggle caret color="default">
                      Dropdown
                    </MDBDropdownToggle>
                    <MDBDropdownMenu color="default" basic>
                      <MDBDropdownItem>Action</MDBDropdownItem>
                      <MDBDropdownItem>Another Action</MDBDropdownItem>
                      <MDBDropdownItem>Something else here</MDBDropdownItem>
                      <MDBDropdownItem divider />
                      <MDBDropdownItem>Separated link</MDBDropdownItem>
                    </MDBDropdownMenu>
                  </MDBDropdown>
                  <MDBDropdown>
                    <MDBDropdownToggle caret color="secondary">
                      Dropdown
                    </MDBDropdownToggle>
                    <MDBDropdownMenu color="secondary" basic>
                      <MDBDropdownItem>Action</MDBDropdownItem>
                      <MDBDropdownItem>Another Action</MDBDropdownItem>
                      <MDBDropdownItem>Something else here</MDBDropdownItem>
                      <MDBDropdownItem divider />
                      <MDBDropdownItem>Separated link</MDBDropdownItem>
                    </MDBDropdownMenu>
                  </MDBDropdown>
                  <MDBDropdown>
                    <MDBDropdownToggle caret color="success">
                      Dropdown
                    </MDBDropdownToggle>
                    <MDBDropdownMenu color="success" basic>
                      <MDBDropdownItem>Action</MDBDropdownItem>
                      <MDBDropdownItem>Another Action</MDBDropdownItem>
                      <MDBDropdownItem>Something else here</MDBDropdownItem>
                      <MDBDropdownItem divider />
                      <MDBDropdownItem>Separated link</MDBDropdownItem>
                    </MDBDropdownMenu>
                  </MDBDropdown>
                  <MDBDropdown>
                    <MDBDropdownToggle caret color="dark">
                      Dropdown
                    </MDBDropdownToggle>
                    <MDBDropdownMenu color="dark" basic>
                      <MDBDropdownItem>Action</MDBDropdownItem>
                      <MDBDropdownItem>Another Action</MDBDropdownItem>
                      <MDBDropdownItem>Something else here</MDBDropdownItem>
                      <MDBDropdownItem divider />
                      <MDBDropdownItem>Separated link</MDBDropdownItem>
                    </MDBDropdownMenu>
                  </MDBDropdown>
                  <MDBDropdown>
                    <MDBDropdownToggle caret color="danger">
                      Dropdown
                    </MDBDropdownToggle>
                    <MDBDropdownMenu color="danger" basic>
                      <MDBDropdownItem>Action</MDBDropdownItem>
                      <MDBDropdownItem>Another Action</MDBDropdownItem>
                      <MDBDropdownItem>Something else here</MDBDropdownItem>
                      <MDBDropdownItem divider />
                      <MDBDropdownItem>Separated link</MDBDropdownItem>
                    </MDBDropdownMenu>
                  </MDBDropdown>
                  <MDBDropdown>
                    <MDBDropdownToggle caret color="info">
                      Dropdown
                    </MDBDropdownToggle>
                    <MDBDropdownMenu color="info" basic>
                      <MDBDropdownItem>Action</MDBDropdownItem>
                      <MDBDropdownItem>Another Action</MDBDropdownItem>
                      <MDBDropdownItem>Something else here</MDBDropdownItem>
                      <MDBDropdownItem divider />
                      <MDBDropdownItem>Separated link</MDBDropdownItem>
                    </MDBDropdownMenu>
                  </MDBDropdown>
                  <MDBDropdown>
                    <MDBDropdownToggle caret color="warning">
                      Dropdown
                    </MDBDropdownToggle>
                    <MDBDropdownMenu color="warning" basic>
                      <MDBDropdownItem>Action</MDBDropdownItem>
                      <MDBDropdownItem>Another Action</MDBDropdownItem>
                      <MDBDropdownItem>Something else here</MDBDropdownItem>
                      <MDBDropdownItem divider />
                      <MDBDropdownItem>Separated link</MDBDropdownItem>
                    </MDBDropdownMenu>
                  </MDBDropdown>
                  <MDBDropdown>
                    <MDBDropdownToggle caret color="ins">
                      Dropdown
                    </MDBDropdownToggle>
                    <MDBDropdownMenu color="ins" basic>
                      <MDBDropdownItem>Action</MDBDropdownItem>
                      <MDBDropdownItem>Another Action</MDBDropdownItem>
                      <MDBDropdownItem>Something else here</MDBDropdownItem>
                      <MDBDropdownItem divider />
                      <MDBDropdownItem>Separated link</MDBDropdownItem>
                    </MDBDropdownMenu>
                  </MDBDropdown>
                </Fragment>

              );
            }

            export default DropdownPage;

Sizing

Button dropdowns work with buttons of all sizes

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
        
            
          import React, { Fragment } from "react";
          import { 
            MDBDropdown, 
            MDBDropdownToggle, 
            MDBDropdownMenu, 
            MDBDropdownItem 
          } from "mdbreact";

          const DropdownPage = () => {
            return (
              <Fragment>
                <MDBDropdown size="lg">
                  <MDBDropdownToggle caret color="danger">
                    Large button
                  </MDBDropdownToggle>
                  <MDBDropdownMenu color="danger" basic>
                    <MDBDropdownItem>Action</MDBDropdownItem>
                    <MDBDropdownItem>Another Action</MDBDropdownItem>
                    <MDBDropdownItem>Something else here</MDBDropdownItem>
                    <MDBDropdownItem>Something else here</MDBDropdownItem>
                  </MDBDropdownMenu>
                </MDBDropdown>
                <MDBDropdown size="sm">
                  <MDBDropdownToggle caret color="danger">
                    Small button
                  </MDBDropdownToggle>
                  <MDBDropdownMenu color="danger" basic>
                    <MDBDropdownItem>Action</MDBDropdownItem>
                    <MDBDropdownItem>Another Action</MDBDropdownItem>
                    <MDBDropdownItem>Something else here</MDBDropdownItem>
                    <MDBDropdownItem>Something else here</MDBDropdownItem>
                  </MDBDropdownMenu>
                </MDBDropdown>
              </Fragment>

            );
          }

          export default DropdownPage;

Dropup variation

Trigger dropdown menus above elements by adding dropup prop to the parent.

Action Another action Something else here
Separated link 
        
            
          import React from "react";
          import { 
            MDBDropdown, 
            MDBDropdownToggle, 
            MDBDropdownMenu, 
            MDBDropdownItem 
          } from "mdbreact";

          const DropdownPage = () => {
            return (
              <MDBDropdown dropup>
                <MDBDropdownToggle caret color="primary">
                  Dropup
                </MDBDropdownToggle>
                <MDBDropdownMenu basic>
                  <MDBDropdownItem>Action</MDBDropdownItem>
                  <MDBDropdownItem>Another Action</MDBDropdownItem>
                  <MDBDropdownItem>Something else here</MDBDropdownItem>
                  <MDBDropdownItem divider />
                  <MDBDropdownItem>Separated link</MDBDropdownItem>
                </MDBDropdownMenu>
              </MDBDropdown>
            );
          }

          export default DropdownPage;

Dropright variation

Trigger dropdown menus on the right side by adding dropright prop to the parent.

Action Another action Something else here
Separated link 
        
            
          import React from "react";
          import {
            MDBDropdown, 
            MDBDropdownToggle, 
            MDBDropdownMenu, 
            MDBDropdownItem 
          } from "mdbreact";

          const DropdownPage = () => {
            return (
              <MDBDropdown dropright>
                <MDBDropdownToggle caret color="primary">
                  Dropup
                </MDBDropdownToggle>
                <MDBDropdownMenu basic>
                  <MDBDropdownItem>Action</MDBDropdownItem>
                  <MDBDropdownItem>Another Action</MDBDropdownItem>
                  <MDBDropdownItem>Something else here</MDBDropdownItem>
                  <MDBDropdownItem divider />
                  <MDBDropdownItem>Separated link</MDBDropdownItem>
                </MDBDropdownMenu>
              </MDBDropdown>
            );
          }

          export default DropdownPage;

Dropleft variation

Trigger dropdown menus on the left side by adding dropleft prop to the parent.

Action Another action Something else here
Separated link 
        
            
          import React from "react";
          import { 
            MDBDropdown, 
            MDBDropdownToggle, 
            MDBDropdownMenu, 
            MDBDropdownItem 
          } from "mdbreact";

          const DropdownPage = () => {
            return (
              <MDBDropdown dropleft>
                <MDBDropdownToggle caret color="primary">
                  Dropleft
                </MDBDropdownToggle>
                <MDBDropdownMenu basic>
                  <MDBDropdownItem>Action</MDBDropdownItem>
                  <MDBDropdownItem>Another Action</MDBDropdownItem>
                  <MDBDropdownItem>Something else here</MDBDropdownItem>
                  <MDBDropdownItem divider />
                  <MDBDropdownItem>Separated link</MDBDropdownItem>
                </MDBDropdownMenu>
              </MDBDropdown>
            );
          }

          export default DropdownPage;

Alignment

By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add right prop to a <MDBDropdownMenu> component to right align the dropdown menu.

Action Another action Something else here 
        
            
          import React from "react";
          import { 
            MDBDropdown, 
            MDBDropdownToggle, 
            MDBDropdownMenu, 
            MDBDropdownItem 
          } from "mdbreact";

          const DropdownPage = () => {
            return (
              <MDBDropdown>
                <MDBDropdownToggle caret color="primary">
                  This dropdown&apos;s menu is right-aligned
                </MDBDropdownToggle>
                <MDBDropdownMenu right basic>
                  <MDBDropdownItem>Action</MDBDropdownItem>
                  <MDBDropdownItem>Another Action</MDBDropdownItem>
                  <MDBDropdownItem>Something else here</MDBDropdownItem>
                </MDBDropdownMenu>
              </MDBDropdown>
            );
          }

          export default DropdownPage;

Disabled menu items

Add .disabled to items in the dropdown to style them as disabled.

Regular link Disabled link Another link 
        
            
          import React from "react";
          import { 
            MDBDropdown, 
            MDBDropdownToggle, 
            MDBDropdownMenu, 
            MDBDropdownItem 
          } from "mdbreact";

          const DropdownPage = () => {
            return (
              <MDBDropdown>
                <MDBDropdownToggle caret color="primary">
                  MDBDropdown
                </MDBDropdownToggle>
                <MDBDropdownMenu basic>
                  <MDBDropdownItem>Regular link</MDBDropdownItem>
                  <MDBDropdownItem disabled href="#">
                    Disabled link
                  </MDBDropdownItem>
                  <MDBDropdownItem href="#">Another link</MDBDropdownItem>
                </MDBDropdownMenu>
              </MDBDropdown>
            );
          }

          export default DropdownPage;

Active menu items

Add active to items in the dropdown to style them as active.

Regular link Active link Another link 
        
            
            import React from "react";
            import { 
              MDBDropdown, 
              MDBDropdownToggle, 
              MDBDropdownMenu, 
              MDBDropdownItem 
            } from "mdbreact";

            const DropdownPage = () => {
              return (
                <MDBDropdown>
                  <MDBDropdownToggle caret color="primary">
                    MDBDropdown
                  </MDBDropdownToggle>
                  <MDBDropdownMenu basic>
                    <MDBDropdownItem>Regular link</MDBDropdownItem>
                    <MDBDropdownItem active href="#">
                      Acrive link
                    </MDBDropdownItem>
                    <MDBDropdownItem href="#">Another link</MDBDropdownItem>
                  </MDBDropdownMenu>
                </MDBDropdown>
              );
            }

            export default DropdownPage;

React Dropdowns - API

In this section you will find advanced information about the Dropdowns component. You will learn which modules are required in this component, what are the possibilities of configuring the component, and what events and methods you can use in working with it.

Import statement

        
             
          import { 
            MDBDropdown, 
            MDBDropdownToggle, 
            MDBDropdownMenu, 
            MDBDropdownItem 
          } from "mdbreact";

API Reference: Dropdown Properties

The table below shows the configuration options of the MDBDropdown component.

Name Type Default Description Example
className String Adds custom classes <MDBDropdown className="customClass" />
dropup Boolean false Trigger dropdown menu above dropdown button <MDBDropdown dropup />
dropright Boolean false Trigger dropdown menu on the rigth side of dropdown button <MDBDropdown dropright />
dropleft Boolean false Trigger dropdown menu on the left side of dropdown button <MDBDropdown dropleft />
group Boolean false Group up Dropdown buttons together; use with MDBBtnGroup wrapper <MDBDropdown group />
size String Determines size of the Dropdown button, available parameters: ["lg", "sm"] (medium by default) <MDBDropdown size="lg" />
tag String div Changes dropdown's wrapper tag <MDBDropdown tag="p" />

API Reference: DropdownToggle Properties

The table below shows the configuration options of the MDBDropdownToggle component.

Name Type Default Description Example
caret Boolean false Inserts caret icon inside Dropdown button <MDBDropdownToggle caret />
className String Adds custom classes <MDBDropdownToggle className="customClass" />
color String secondary Changes Dropdown button background color, accepts MDB predefined color classes <MDBDropdownToggle color="primary" />
disabled Boolean false Disables element from being clicked <MDBDropdownToggle disabled />
nav Boolean false Props required while using Dropdown within Navbar <MDBDropdownToggle nav />
tag String button Changes dropdown's wrapper tag <MDBDropdownToggle tag="p" />

API Reference: DropdownMenu Properties

The table below shows the configuration options of the MDBDropdownMenu component.

Name Type Default Description Example
color String primary Changes DropdownMenuItem hover background color, accepts ["primary", "default", "secondary", "success", "dark", "danger", "info", "warning", "ins" ] <MDBDropdownMenu color="success" />
className String Adds custom classes <MDBDropdownMenu className="customClass" />
tag String div Changes dropdown menus's wrapper tag <MDBDropdownMenu tag="p" />
right Boolean false Sets the menu item to the right of the button <MDBDropdownMenu right />

API Reference: DropdownItem Properties

The table below shows the configuration options of the MDBDropdownItem component.

Name Type Default Description Example
active Boolean false Sets active state for of the menu item <MDBDropdownItem active />
className String Adds custom classes <MDBDropdownItem className="customClass" />
disabled Boolean false Disables item and sets its color to light grey <MDBDropdownItem disabled />
divider Boolean false Places dividing line instead of content <MDBDropdownItem divider />
header Boolean false Formats the item as a menu header (grey text, more padding) <MDBDropdownItem header />
toggle Boolean true Set to false to prevent from closing Dropdown on click <MDBDropdownItem toggle={false} />
tag String div Changes DropdownItem's tag <MDBDropdownItem tag="p" />