Components

#Single button dropdowns

Create a dropdown button with the <DropdownButton /> component.

const BUTTONS = ['Default', 'Primary', 'Success', 'Info', 'Warning', 'Danger'];

function renderDropdownButton(title, i) {
  return (
    <DropdownButton
      bsStyle={title.toLowerCase()}
      title={title}
      key={i}
      id={`dropdown-basic-${i}`}
    >
      <MenuItem eventKey="1">Action</MenuItem>
      <MenuItem eventKey="2">Another action</MenuItem>
      <MenuItem eventKey="3" active>
        Active Item
      </MenuItem>
      <MenuItem divider />
      <MenuItem eventKey="4">Separated link</MenuItem>
    </DropdownButton>
  );
}

const buttonsInstance = (
  <ButtonToolbar>{BUTTONS.map(renderDropdownButton)}</ButtonToolbar>
);

render(buttonsInstance);

#Split button dropdowns

Similarly, create split button dropdowns with the <SplitButton /> component.

const BUTTONS = ['Default', 'Primary', 'Success', 'Info', 'Warning', 'Danger'];

function renderDropdownButton(title, i) {
  return (
    <SplitButton
      bsStyle={title.toLowerCase()}
      title={title}
      key={i}
      id={`split-button-basic-${i}`}
    >
      <MenuItem eventKey="1">Action</MenuItem>
      <MenuItem eventKey="2">Another action</MenuItem>
      <MenuItem eventKey="3">Something else here</MenuItem>
      <MenuItem divider />
      <MenuItem eventKey="4">Separated link</MenuItem>
    </SplitButton>
  );
}

const buttonsInstance = (
  <ButtonToolbar>{BUTTONS.map(renderDropdownButton)}</ButtonToolbar>
);

render(buttonsInstance);

#Sizing

Dropdowns work with buttons of all sizes.

<div>
  <ButtonToolbar>
    <DropdownButton
      bsSize="large"
      title="Large button"
      id="dropdown-size-large"
    >
      <MenuItem eventKey="1">Action</MenuItem>
      <MenuItem eventKey="2">Another action</MenuItem>
      <MenuItem eventKey="3">Something else here</MenuItem>
      <MenuItem divider />
      <MenuItem eventKey="4">Separated link</MenuItem>
    </DropdownButton>
  </ButtonToolbar>

  <ButtonToolbar>
    <DropdownButton title="Default button" id="dropdown-size-medium">
      <MenuItem eventKey="1">Action</MenuItem>
      <MenuItem eventKey="2">Another action</MenuItem>
      <MenuItem eventKey="3">Something else here</MenuItem>
      <MenuItem divider />
      <MenuItem eventKey="4">Separated link</MenuItem>
    </DropdownButton>
  </ButtonToolbar>

  <ButtonToolbar>
    <DropdownButton
      bsSize="small"
      title="Small button"
      id="dropdown-size-small"
    >
      <MenuItem eventKey="1">Action</MenuItem>
      <MenuItem eventKey="2">Another action</MenuItem>
      <MenuItem eventKey="3">Something else here</MenuItem>
      <MenuItem divider />
      <MenuItem eventKey="4">Separated link</MenuItem>
    </DropdownButton>
  </ButtonToolbar>

  <ButtonToolbar>
    <DropdownButton
      bsSize="xsmall"
      title="Extra small button"
      id="dropdown-size-extra-small"
    >
      <MenuItem eventKey="1">Action</MenuItem>
      <MenuItem eventKey="2">Another action</MenuItem>
      <MenuItem eventKey="3">Something else here</MenuItem>
      <MenuItem divider />
      <MenuItem eventKey="4">Separated link</MenuItem>
    </DropdownButton>
  </ButtonToolbar>
</div>;

#No caret variation

Remove the caret using the noCaret prop.

<ButtonToolbar>
  <DropdownButton
    bsStyle="default"
    title="No caret"
    noCaret
    id="dropdown-no-caret"
  >
    <MenuItem eventKey="1">Action</MenuItem>
    <MenuItem eventKey="2">Another action</MenuItem>
    <MenuItem eventKey="3">Something else here</MenuItem>
    <MenuItem divider />
    <MenuItem eventKey="4">Separated link</MenuItem>
  </DropdownButton>
</ButtonToolbar>;

#Dropup variation

Trigger dropdown menus that site above the button by adding the dropup prop.

<div>
  <ButtonToolbar>
    <SplitButton title="Dropup" dropup id="split-button-dropup">
      <MenuItem eventKey="1">Action</MenuItem>
      <MenuItem eventKey="2">Another action</MenuItem>
      <MenuItem eventKey="3">Something else here</MenuItem>
      <MenuItem divider />
      <MenuItem eventKey="4">Separated link</MenuItem>
    </SplitButton>
  </ButtonToolbar>

  <ButtonToolbar>
    <SplitButton
      bsStyle="primary"
      title="Right dropup"
      dropup
      pullRight
      id="split-button-dropup-pull-right"
    >
      <MenuItem eventKey="1">Action</MenuItem>
      <MenuItem eventKey="2">Another action</MenuItem>
      <MenuItem eventKey="3">Something else here</MenuItem>
      <MenuItem divider />
      <MenuItem eventKey="4">Separated link</MenuItem>
    </SplitButton>
  </ButtonToolbar>
</div>;

#Dropdown right variation

Trigger dropdown menus that align to the right of the button using the pullRight prop.

<SplitButton title="Dropdown right" pullRight id="split-button-pull-right">
  <MenuItem eventKey="1">Action</MenuItem>
  <MenuItem eventKey="2">Another action</MenuItem>
  <MenuItem eventKey="3">Something else here</MenuItem>
  <MenuItem divider />
  <MenuItem eventKey="4">Separated link</MenuItem>
</SplitButton>;

This component represents a menu item in a dropdown.

It supports the basic anchor properties href, target, title.

It also supports different properties of the normal Bootstrap MenuItem.

header: To add a header label to sections
divider: Adds an horizontal divider between sections
disabled: shows the item as disabled, and prevents onSelect from firing
eventKey: passed to the callback
onSelect: a callback that is called when the user clicks the item.

The callback is called with the following arguments: eventKey and event

function onSelectAlert(eventKey) {
  alert(`Alert from menu item.\neventKey: ${eventKey}`);
}

const MenuItems = (
  <Clearfix>
    <ul className="dropdown-menu open">
      <MenuItem header>Header</MenuItem>
      <MenuItem>link</MenuItem>
      <MenuItem divider />
      <MenuItem header>Header</MenuItem>
      <MenuItem>link</MenuItem>
      <MenuItem disabled>disabled</MenuItem>
      <MenuItem title="See? I have a title.">link with title</MenuItem>
      <MenuItem eventKey={1} href="#someHref" onSelect={onSelectAlert}>
        link that alerts
      </MenuItem>
    </ul>
  </Clearfix>
);

render(MenuItems);

If the default handling of the dropdown menu and toggle components aren't to your liking, you can customize them, by using the more basic Dropdown Component to explicitly specify the Toggle and Menu components

Additional Import Options

As a convenience Toggle and Menu components available as static properties on the Dropdown component. However, you can also import them directly, from the /lib directory like: require("react-bootstrap/lib/DropdownToggle").

<ButtonToolbar>
  <Dropdown id="dropdown-custom-1">
    <Dropdown.Toggle>
      <Glyphicon glyph="star" />
      Pow! Zoom!
    </Dropdown.Toggle>
    <Dropdown.Menu className="super-colors">
      <MenuItem eventKey="1">Action</MenuItem>
      <MenuItem eventKey="2">Another action</MenuItem>
      <MenuItem eventKey="3" active>
        Active Item
      </MenuItem>
      <MenuItem divider />
      <MenuItem eventKey="4">Separated link</MenuItem>
    </Dropdown.Menu>
  </Dropdown>

  <Dropdown id="dropdown-custom-2">
    <Button bsStyle="info">mix it up style-wise</Button>
    <Dropdown.Toggle bsStyle="success" />
    <Dropdown.Menu className="super-colors">
      <MenuItem eventKey="1">Action</MenuItem>
      <MenuItem eventKey="2">Another action</MenuItem>
      <MenuItem eventKey="3" active>
        Active Item
      </MenuItem>
      <MenuItem divider />
      <MenuItem eventKey="4">Separated link</MenuItem>
    </Dropdown.Menu>
  </Dropdown>
</ButtonToolbar>;

Custom Dropdown Components

For those that want to customize everything, you can forgo the included Toggle and Menu components, and create your own. In order to tell the Dropdown component what role your custom components play, add a special prop bsRole to your menu or toggle components. The Dropdown expects at least one component with bsRole="toggle" and exactly one with bsRole="menu". Custom toggle and menu components must be able to accept refs.

Using `rootCloseEvent` with custom dropdown components

If you want to use the rootCloseEvent prop with your custom dropdown components, you will have to pass the rootCloseEvent to <RootCloseWrapper> in your custom dropdown menu component similarly to how it is implemented in <Dropdown.Menu>.

You will have to add react-overlays as a dependency and import <RootCloseWrapper> from react-overlays yourself like: import RootCloseWrapper from 'react-overlays/lib/RootCloseWrapper'.

class CustomToggle extends React.Component {
  constructor(props, context) {
    super(props, context);

    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(e) {
    e.preventDefault();

    this.props.onClick(e);
  }

  render() {
    return (
      <a href="" onClick={this.handleClick}>
        {this.props.children}
      </a>
    );
  }
}

class CustomMenu extends React.Component {
  constructor(props, context) {
    super(props, context);

    this.handleChange = this.handleChange.bind(this);

    this.state = {
      value: ''
    };
  }

  handleChange(e) {
    this.setState({ value: e.target.value });
  }

  focusNext() {
    const input = ReactDOM.findDOMNode(this.input);

    if (input) {
      input.focus();
    }
  }

  render() {
    const { children } = this.props;
    const { value } = this.state;

    return (
      <div className="dropdown-menu" style={{ padding: '' }}>
        <FormControl
          ref={c => {
            this.input = c;
          }}
          type="text"
          placeholder="Type to filter..."
          onChange={this.handleChange}
          value={value}
        />
        <ul className="list-unstyled">
          {React.Children.toArray(children).filter(
            child => !value.trim() || child.props.children.indexOf(value) !== -1
          )}
        </ul>
      </div>
    );
  }
}

render(
  <Dropdown id="dropdown-custom-menu">
    <CustomToggle bsRole="toggle">Custom toggle</CustomToggle>

    <CustomMenu bsRole="menu">
      <MenuItem eventKey="1">Red</MenuItem>
      <MenuItem eventKey="2">Blue</MenuItem>
      <MenuItem eventKey="3" active>
        Orange
      </MenuItem>
      <MenuItem eventKey="1">Red-Orange</MenuItem>
    </CustomMenu>
  </Dropdown>
);

#Props

#DropdownButton [source]

Name	Type	Description
bsStyle	string	Component visual or contextual style variants.
bsSize	string	Component size variations.
title required	node
noCaret	boolean

#SplitButton [source]

Name	Type	Description
bsStyle	string	Component visual or contextual style variants.
bsSize	string	Component size variations.
href	string
onClick	function
title required	node	The content of the split button.
toggleLabel	string	Accessible label for the toggle; the value of `title` if not specified.

#Dropdown [source]

Name	Type	Default	Description
dropup	boolean		The menu will open above the dropdown button, instead of below it.
id required	string\|number		An html id attribute, necessary for assistive technologies, such as screen readers.
componentClass	elementType	ButtonGroup	You can use a custom element type for this component.
children	node		The children of a Dropdown may be a `<Dropdown.Toggle>` or a `<Dropdown.Menu>`.
disabled	boolean		Whether or not component is disabled.
pullRight	boolean		Align the menu to the right side of the Dropdown toggle
open	boolean		controlled by: `onToggle`, initial prop: `defaultOpen` Whether or not the Dropdown is visible.
defaultOpen	boolean
onToggle	function		controls `open` A callback fired when the Dropdown wishes to change visibility. Called with the requested `open` value, the DOM event, and the source that fired it: `'click'`,`'keydown'`,`'rootClose'`, or `'select'`. `function(Boolean isOpen, Object event, { String source }) {}`
onSelect	function		A callback fired when a menu item is selected. `(eventKey: any, event: Object) => any`
role	string		If `'menuitem'`, causes the dropdown to behave like a menu item rather than a menu button.
rootCloseEvent	one of: `'click'`, `'mousedown'`		Which event when fired outside the component will cause it to be closed Note: For custom dropdown components, you will have to pass the `rootCloseEvent` to `<RootCloseWrapper>` in your custom dropdown menu component (similarly to how it is implemented in `<Dropdown.Menu>`).

#Menu Item [source]

Name	Type	Default	Description
active	boolean		Highlight the menu item as active.
disabled	boolean	false	Disable the menu item, making it unselectable.
divider	all( PropTypes.bool, ({ divider, children }) => divider && children ? new Error('Children will not be rendered for dividers') : null )	false	Styles the menu item as a horizontal rule, providing visual separation between groups of menu items.
eventKey	any		Value passed to the `onSelect` handler, useful for identifying the selected menu item.
header	boolean	false	Styles the menu item as a header label, useful for describing a group of menu items.
href	string		HTML `href` attribute corresponding to `a.href`.
onClick	function		Callback fired when the menu item is clicked.
onSelect	function		Callback fired when the menu item is selected. `(eventKey: any, event: Object) => any`
bsClass	string	'dropdown'	Base CSS class and prefix for the component. Generally one should only change `bsClass` to provide new, non-Bootstrap, CSS styles for a component.

Components

#Dropdowns DropdownButton, SplitButton, Dropdown

#Single button dropdowns

#Split button dropdowns

#Sizing

#No caret variation

#Dropup variation

#Dropdown right variation

#Menu items MenuItem

#Dropdown Customization

Additional Import Options

Custom Dropdown Components

Using `rootCloseEvent` with custom dropdown components

#Props

#DropdownButton [source]

#SplitButton [source]

#Dropdown [source]

#Menu Item [source]

Components

#Dropdowns DropdownButton, SplitButton, Dropdown

#Menu items MenuItem

Additional Import Options

Custom Dropdown Components

Using rootCloseEvent with custom dropdown components

Using `rootCloseEvent` with custom dropdown components