Sign in


Sign up


Bootstrap dropdown

The dropdown is simply a drop-down menu embedding additional links or content. It allows you to construct much more 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

                        
  import React from 'react';
  import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'mdbreact';
   class DropdownPage extends React.Component {
    constructor(props) {
      super(props);
      this.toggle = this.toggle.bind(this);
      this.state = {
        dropdownOpen: false,
      };
    }
    toggle() {
      this.setState({
        dropdownOpen: !this.state.dropdownOpen
      });
    }
    render() {
      return (
          <Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
            <DropdownToggle caret  color="primary">
              Material dropdown
            </DropdownToggle>
            <DropdownMenu>
              <DropdownItem href="#">Action</DropdownItem>
              <DropdownItem href="#">Another Action</DropdownItem>
              <DropdownItem href="#">Something else here</DropdownItem>
              <DropdownItem href="#">Something else here</DropdownItem>
            </DropdownMenu>
          </Dropdown>
      );
    }
  }
  export default DropdownPage;
      

Material dropdowns MDB Pro component

                        
  import React from 'react';
  import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'mdbreact';
   class DropdownPage extends React.Component {
    constructor(props) {
      super(props);
      this.toggle = this.toggle.bind(this);
      this.state = {
        dropdownOpen: false,
      };
    }
    toggle() {
      this.setState({
        dropdownOpen: !this.state.dropdownOpen
      });
    }
    render() {
      return (
          <Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
            <DropdownToggle caret  color="primary">
              Material dropdown
            </DropdownToggle>
            <DropdownMenu>
              <DropdownItem href="#">Action</DropdownItem>
              <DropdownItem href="#">Another Action</DropdownItem>
              <DropdownItem href="#">Something else here</DropdownItem>
              <DropdownItem href="#">Something else here</DropdownItem>
            </DropdownMenu>
          </Dropdown>
      );
    }
  }
  export default DropdownPage;
      

To change a color of the dropdown use one of the following classes.

  • color="primary"

  • color="default"

  • color="secondary"

  • color="success"

  • color="elegant"

  • color="danger"

  • color="info"

  • color="warning"

  • color="ins"


Sizing

Button dropdowns work with buttons of all sizes

                        
import React from 'react';
import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'mdbreact';
 class DropdownPage extends React.Component {
  constructor(props) {
    super(props);
    this.toggle = this.toggle.bind(this);
    this.toggle1 = this.toggle1.bind(this);
    this.state = {
      dropdownOpen: false,
      dropdownOpen1: false,
    };
  }
  toggle() {
    this.setState({
      dropdownOpen: !this.state.dropdownOpen
    });
  }
  toggle1() {
    this.setState({
      dropdownOpen1: !this.state.dropdownOpen1
    });
  }
  render() {
    return (
        <div>
          <Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggle} size="lg">
            <DropdownToggle caret color="danger">
              Large Button
            </DropdownToggle>
            <DropdownMenu>
              <DropdownItem>Action</DropdownItem>
              <DropdownItem>Another Action</DropdownItem>
              <DropdownItem >Something else here</DropdownItem>
              <DropdownItem divider/>
              <DropdownItem>Separated link</DropdownItem>
            </DropdownMenu>
          </Dropdown>
          <Dropdown isOpen={this.state.dropdownOpen1} toggle={this.toggle1} size="sm">
            <DropdownToggle caret color="danger">
              Small Button
            </DropdownToggle>
            <DropdownMenu>
              <DropdownItem>Action</DropdownItem>
              <DropdownItem>Another Action</DropdownItem>
              <DropdownItem>Something else here</DropdownItem>
              <DropdownItem divider/>
              <DropdownItem>Separated link</DropdownItem>
            </DropdownMenu>
          </Dropdown>
        </div>
    );
  }
}
export default DropdownPage;
      

Dropup variation

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

                        
import React from 'react';
import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'mdbreact';
 class DropdownPage extends React.Component {
  constructor(props) {
    super(props);
    this.toggle = this.toggle.bind(this);
    this.state = {
      dropdownOpen: false,
    };
  }
  toggle() {
    this.setState({
      dropdownOpen: !this.state.dropdownOpen
    });
  }
  render() {
    return (
          <Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggle} dropup>
            <DropdownToggle caret color="primary">
              Dropup
            </DropdownToggle>
            <DropdownMenu>
              <DropdownItem>Action</DropdownItem>
              <DropdownItem>Another Action</DropdownItem>
              <DropdownItem >Something else here</DropdownItem>
              <DropdownItem divider/>
              <DropdownItem>Separated link</DropdownItem>
            </DropdownMenu>
          </Dropdown>
    );
  }
}
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 .dropdown-menu-right to a .dropdown-menu to right align the dropdown menu.

                        
import React from 'react';
import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'mdbreact';
 class DropdownPage extends React.Component {
  constructor(props) {
    super(props);
    this.toggle = this.toggle.bind(this);
    this.state = {
      dropdownOpen: false,
    };
  }
  toggle() {
    this.setState({
      dropdownOpen: !this.state.dropdownOpen
    });
  }
  render() {
    return (
          <Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
            <DropdownToggle caret color="primary">
              This dropdown's menu is right-aligned
            </DropdownToggle>
            <DropdownMenu right>
              <DropdownItem>Action</DropdownItem>
              <DropdownItem>Another Action</DropdownItem>
              <DropdownItem >Something else here</DropdownItem>
            </DropdownMenu>
          </Dropdown>
    );
  }
}
export default DropdownPage;
      



Disabled menu items

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

                        
import React from 'react';
import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'mdbreact';
 class DropdownPage extends React.Component {
  constructor(props) {
    super(props);
    this.toggle = this.toggle.bind(this);
    this.state = {
      dropdownOpen: false,
    };
  }
  toggle() {
    this.setState({
      dropdownOpen: !this.state.dropdownOpen
    });
  }
  render() {
    return (
          <Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
            <DropdownToggle caret color="primary">
              Dropdown
            </DropdownToggle>
            <DropdownMenu>
              <DropdownItem href="#">Regular link</DropdownItem>
              <DropdownItem href="#" disabled>Disabled link</DropdownItem>
              <DropdownItem href="#">Another link</DropdownItem>
            </DropdownMenu>
          </Dropdown>
    );
  }
}
export default DropdownPage;