Bootstrap: Dropdowns

Basic Example

Toggleable, contextual menu for displaying lists of links. The Dropdown component contains the entire menu with a special Button subclass DropdownButton. Whatever property/attribute you can pass to Button component can also be passed to DropdownButton. However DropdownButton has two special props: container and menu. The container points to the current React class and menu points to the menu you would like to toggle. Dropdown component also contains a Menu component which is a container for all MenuItems. Caret component adds a caret to the dropdown button.

As you can see it's much shorter than it's Bootstrap counterpart. We'll be covering individual parts (DropdownButton, Menu, MenuItem) later in the documentation.

var demo = React.createClass({
  handleSelection: function(itemprops) {
    // access any property attached to MenuItem child component.
    // ex: itemprops.keyaction === 'another-action' if MenuItem
    // with Another action" is clicked.
    var value = itemprops.children;
    alert(value);
    if(itemprops.keyaction === 'another-action')
      alert('You clicked another-action');
  },
  render: function() {
    return (
      <Dropdown>
        <DropdownButton bsStyle='blue' container={this} menu='menu1'>
          <span>Dropdown </span><Caret/>
        </DropdownButton>
        <Menu ref='menu1' bsStyle='blue' onItemSelect={this.handleSelection}>
          <MenuItem active href='#'>Action</MenuItem>
          <MenuItem keyaction='another-action' href='#'>Another action</MenuItem>
          <MenuItem href='#'>Something else here</MenuItem>
          <MenuItem divider/>
          <MenuItem href='#'>Separated link</MenuItem>
        </Menu>
      </Dropdown>
    );
  }
});

Alignment

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

var demo = React.createClass({
  handleSelection: function(itemprops) {
    // access any property attached to MenuItem child component.
    // ex: itemprops.keyaction === 'another-action' if MenuItem
    // with Another action" is clicked.
    var value = itemprops.children;
    alert(value);
    if(itemprops.keyaction === 'another-action')
      alert('You clicked another-action');
  },
  render: function() {
    return (
      <Dropdown>
        <DropdownButton bsStyle='red' container={this} menu='menu2'>
          <span>Dropdown </span><Caret/>
        </DropdownButton>
        <Menu ref='menu2' bsStyle='red' onItemSelect={this.handleSelection} alignRight>
          <MenuItem active href='#'>Action</MenuItem>
          <MenuItem keyaction='another-action' href='#'>Another action</MenuItem>
          <MenuItem href='#'>Something else here</MenuItem>
          <MenuItem divider/>
          <MenuItem href='#'>Separated link</MenuItem>
        </Menu>
      </Dropdown>
    );
  }
});

Headers

Add a header to label sections of actions in any dropdown menu.

<Dropdown>
  <DropdownButton bsStyle='green' container={this} menu='menu3'>
    <span>Dropdown </span><Caret/>
  </DropdownButton>
  <Menu bsStyle='green' ref='menu3'>
    <MenuItem header>Dropdown header</MenuItem>
    <MenuItem href='#'>Action</MenuItem>
    <MenuItem href='#'>Another action</MenuItem>
    <MenuItem href='#'>Something else here</MenuItem>
    <MenuItem divider/>
    <MenuItem header>Dropdown header</MenuItem>
    <MenuItem href='#'>Separated link</MenuItem>
  </Menu>
</Dropdown>

Disabled menu item

Add prop disabled to a <MenuItem> in the dropdown to disable it.

<Dropdown>
  <DropdownButton bsStyle='orange75' container={this} menu='menu4'>
    <span>Dropdown </span><Caret/>
  </DropdownButton>
  <Menu ref='menu4' bsStyle='orange75'>
    <MenuItem href='#'>Regular link</MenuItem>
    <MenuItem href='#' disabled>Disabled link</MenuItem>
    <MenuItem href='#'>Another link</MenuItem>
  </Menu>
</Dropdown>

Single button dropdowns

Use a DropdownButton to toggle dropdowns.

<ButtonGroup>
  <DropdownButton container={this} menu='menu12'>
    <span>Default </span><Caret/>
  </DropdownButton>
  <Menu ref='menu12'>
    <MenuItem href='#'>Action</MenuItem>
    <MenuItem href='#'>Another Action</MenuItem>
    <MenuItem href='#'>Something else here</MenuItem>
    <MenuItem divider></MenuItem>
    <MenuItem href='#'>Separated link</MenuItem>
  </Menu>
</ButtonGroup>{' '}
<ButtonGroup>
  <DropdownButton container={this} menu='menu13' bsStyle='primary'>
    <span>Primary </span><Caret/>
  </DropdownButton>
  <Menu ref='menu13' bsStyle='primary'>
    <MenuItem href='#'>Action</MenuItem>
    <MenuItem href='#'>Another Action</MenuItem>
    <MenuItem href='#'>Something else here</MenuItem>
    <MenuItem divider></MenuItem>
    <MenuItem href='#'>Separated link</MenuItem>
  </Menu>
</ButtonGroup>{' '}
<ButtonGroup>
  <DropdownButton container={this} menu='menu14' bsStyle='success'>
    <span>Success </span><Caret/>
  </DropdownButton>
  <Menu ref='menu14' bsStyle='success'>
    <MenuItem href='#'>Action</MenuItem>
    <MenuItem href='#'>Another Action</MenuItem>
    <MenuItem href='#'>Something else here</MenuItem>
    <MenuItem divider></MenuItem>
    <MenuItem href='#'>Separated link</MenuItem>
  </Menu>
</ButtonGroup>{' '}
<ButtonGroup>
  <DropdownButton container={this} menu='menu15' bsStyle='info'>
    <span>Info </span><Caret/>
  </DropdownButton>
  <Menu ref='menu15' bsStyle='info'>
    <MenuItem href='#'>Action</MenuItem>
    <MenuItem href='#'>Another Action</MenuItem>
    <MenuItem href='#'>Something else here</MenuItem>
    <MenuItem divider></MenuItem>
    <MenuItem href='#'>Separated link</MenuItem>
  </Menu>
</ButtonGroup>{' '}
<ButtonGroup>
  <DropdownButton container={this} menu='menu16' bsStyle='warning'>
    <span>Warning </span><Caret/>
  </DropdownButton>
  <Menu ref='menu16' bsStyle='warning'>
    <MenuItem href='#'>Action</MenuItem>
    <MenuItem href='#'>Another Action</MenuItem>
    <MenuItem href='#'>Something else here</MenuItem>
    <MenuItem divider></MenuItem>
    <MenuItem href='#'>Separated link</MenuItem>
  </Menu>
</ButtonGroup>{' '}
<ButtonGroup>
  <DropdownButton container={this} menu='menu17' bsStyle='danger'>
    <span>Danger </span><Caret/>
  </DropdownButton>
  <Menu ref='menu17' bsStyle='danger'>
    <MenuItem href='#'>Action</MenuItem>
    <MenuItem href='#'>Another Action</MenuItem>
    <MenuItem href='#'>Something else here</MenuItem>
    <MenuItem divider></MenuItem>
    <MenuItem href='#'>Separated link</MenuItem>
  </Menu>
</ButtonGroup>

Split button dropdowns

Similarly, create split button dropdowns with the same markup changes, only with a separate Button.

<ButtonGroup>
  <Button>Default</Button>
  <DropdownButton container={this} menu='menu18'>
    <Caret/>
  </DropdownButton>
  <Menu ref='menu18'>
    <MenuItem href='#'>Action</MenuItem>
    <MenuItem href='#'>Another Action</MenuItem>
    <MenuItem href='#'>Something else here</MenuItem>
    <MenuItem divider></MenuItem>
    <MenuItem href='#'>Separated link</MenuItem>
  </Menu>
</ButtonGroup>{' '}
<ButtonGroup>
  <Button bsStyle='primary'>Primary</Button>
  <DropdownButton container={this} menu='menu19' bsStyle='primary'>
    <Caret/>
  </DropdownButton>
  <Menu ref='menu19' bsStyle='primary'>
    <MenuItem href='#'>Action</MenuItem>
    <MenuItem href='#'>Another Action</MenuItem>
    <MenuItem href='#'>Something else here</MenuItem>
    <MenuItem divider></MenuItem>
    <MenuItem href='#'>Separated link</MenuItem>
  </Menu>
</ButtonGroup>{' '}
<ButtonGroup>
  <Button bsStyle='success'>Success</Button>
  <DropdownButton container={this} menu='menu20' bsStyle='success'>
    <Caret/>
  </DropdownButton>
  <Menu ref='menu20' bsStyle='success'>
    <MenuItem href='#'>Action</MenuItem>
    <MenuItem href='#'>Another Action</MenuItem>
    <MenuItem href='#'>Something else here</MenuItem>
    <MenuItem divider></MenuItem>
    <MenuItem href='#'>Separated link</MenuItem>
  </Menu>
</ButtonGroup>{' '}
<ButtonGroup>
  <Button bsStyle='info'>Info</Button>
  <DropdownButton container={this} menu='menu21' bsStyle='info'>
    <Caret/>
  </DropdownButton>
  <Menu ref='menu21' bsStyle='info'>
    <MenuItem href='#'>Action</MenuItem>
    <MenuItem href='#'>Another Action</MenuItem>
    <MenuItem href='#'>Something else here</MenuItem>
    <MenuItem divider></MenuItem>
    <MenuItem href='#'>Separated link</MenuItem>
  </Menu>
</ButtonGroup>{' '}
<ButtonGroup>
  <Button bsStyle='warning'>Warning</Button>
  <DropdownButton container={this} menu='menu22' bsStyle='warning'>
    <Caret/>
  </DropdownButton>
  <Menu ref='menu22' bsStyle='warning'>
    <MenuItem href='#'>Action</MenuItem>
    <MenuItem href='#'>Another Action</MenuItem>
    <MenuItem href='#'>Something else here</MenuItem>
    <MenuItem divider></MenuItem>
    <MenuItem href='#'>Separated link</MenuItem>
  </Menu>
</ButtonGroup>{' '}
<ButtonGroup>
  <Button bsStyle='danger'>Danger</Button>
  <DropdownButton container={this} menu='menu23' bsStyle='danger'>
    <Caret/>
  </DropdownButton>
  <Menu ref='menu23' bsStyle='danger'>
    <MenuItem href='#'>Action</MenuItem>
    <MenuItem href='#'>Another Action</MenuItem>
    <MenuItem href='#'>Something else here</MenuItem>
    <MenuItem divider></MenuItem>
    <MenuItem href='#'>Separated link</MenuItem>
  </Menu>
</ButtonGroup>{' '}

Dropup variation

Trigger dropup menus by adding dropup prop to a ButtonGroup/Dropdown component.

<ButtonGroup dropup>
  <Button>Dropup </Button>
  <DropdownButton container={this} menu='menu27'>
    <Caret/>
  </DropdownButton>
  <Menu ref='menu27'>
    <MenuItem href='#'>Action</MenuItem>
    <MenuItem href='#'>Another Action</MenuItem>
    <MenuItem href='#'>Something else here</MenuItem>
    <MenuItem divider></MenuItem>
    <MenuItem href='#'>Separated link</MenuItem>
  </Menu>
</ButtonGroup>{' '}
<ButtonGroup dropup>
  <Button bsStyle='primary'>Dropup </Button>
  <DropdownButton container={this} menu='menu28' bsStyle='primary'>
    <Caret/>
  </DropdownButton>
  <Menu ref='menu28' bsStyle='primary'>
    <MenuItem href='#'>Action</MenuItem>
    <MenuItem href='#'>Another Action</MenuItem>
    <MenuItem href='#'>Something else here</MenuItem>
    <MenuItem divider></MenuItem>
    <MenuItem href='#'>Separated link</MenuItem>
  </Menu>
</ButtonGroup>{' '}