# Dropdowns DropdownButton, SplitButton, Dropdown

# Single button dropdowns

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


  class DefaultDropdown extends React.Component {
    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>
      );
    }
    render() {
      let BUTTONS = ['Default', 'Primary', 'Success', 'Info', 'Warning', 'Danger', 'Link', 'Orange'];
      return (
        <ButtonToolbar>{BUTTONS.map(::this.renderDropdownButton)}</ButtonToolbar>
      );
    }
  }

  

# Dropdown hover button

Create a dropdown hover button with the <DropdownHoverButton /> component.


  class DefaultDropdown extends React.Component {
    renderDropdownHoverButton(title, i) {
      return (
        <DropdownHoverButton 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>
        </DropdownHoverButton>
      );
    }
    render() {
      let BUTTONS = ['Default', 'Primary', 'Success', 'Info', 'Warning', 'Danger', 'Link', 'Orange'];
      return (
        <ButtonToolbar>{BUTTONS.map(::this.renderDropdownHoverButton)}</ButtonToolbar>
      );
    }
  }

  

# Split button dropdowns

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


  class DefaultDropdown extends React.Component {
    renderSplitButton(title, i) {
      return (
        <SplitButton 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>
        </SplitButton>
      );
    }
    render() {
      let BUTTONS = ['Default', 'Primary', 'Success', 'Info', 'Warning', 'Danger', 'Link', 'Orange'];
      return (
        <ButtonToolbar>{BUTTONS.map(::this.renderSplitButton)}</ButtonToolbar>
      );
    }
  }

  

# Split hover button dropdowns

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


  class DefaultDropdown extends React.Component {
    renderSplitHoverButton(title, i) {
      return (
        <SplitHoverButton 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>
        </SplitHoverButton>
      );
    }
    render() {
      let BUTTONS = ['Default', 'Primary', 'Success', 'Info', 'Warning', 'Danger', 'Link', 'Orange'];
      return (
        <ButtonToolbar>{BUTTONS.map(::this.renderSplitHoverButton)}</ButtonToolbar>
      );
    }
  }

  

# Sizing

Dropdowns work with buttons of all sizes. You can use either bsSize=large|small|xsmall or shortcut props like lg, sm and xs to size the DropdownButton.


          const buttonsInstance = (
            <div>
              <ButtonToolbar>
                <DropdownButton lg 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 style={{marginTop: 10}}>
                <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 style={{marginTop: 10}}>
                <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 style={{marginTop: 10}}>
                <DropdownButton xs 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.


          const buttonInstance = (
            <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.


          const dropdownsInstance = (
            <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 style={{marginTop: 10}}>
                <SplitButton bsStyle="red" title="Right dropup" dropup pullRight id="split-button-dropup-pull-right">
                  <MenuItem eventKey="1">Action</MenuItem>
                  <MenuItem eventKey="2" active>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.


          const dropdownsInstance = (
            <div>
              <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>
            </div>
          );

          
        

# Props

DropdownButton / DropdownHoverButton

NameTypeDefaultDescription
bsClassstring'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.
bsSizebsSizeComponent size variations.
bsStylebsStyleComponent visual or contextual style variants.
childrennodeThe children of a Dropdown may be a <Dropdown.Toggle/> or a <Dropdown.Menu/>.
componentClasselementTypeButtonGroup
disabledbooleanfalse
dropupbooleanfalse
id requiredstring|numberAn html id attribute, necessary for assistive technologies, such as screen readers.
noCaretbooleanfalseWhen used with the title prop, the noCaret option will not render a caret icon, in the toggle element.
onClosefunctionA callback fired when the Dropdown closes.
onSelectfunction
A callback fired when a menu item is selected.
(eventKey: any, event: Object) => any
onTogglefunction
controls open
A callback fired when the Dropdown wishes to change visibility. Called with the requested open value.
function(Boolean isOpen) {}
openboolean
controlled by: onToggle, initial prop: defaultOpen
Whether or not the Dropdown is visible.
function(Boolean isOpen) {}
pullRightbooleanfalse
rolestringIf 'menuitem', causes the dropdown to behave like a menu item rather than a menu button.
title requirednode

SplitButton / SplitHoverButton

NameTypeDefaultDescription
bsClassstring'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.
bsStylebsStyleComponent visual or contextual style variants.
childrennodeThe children of a Dropdown may be a <Dropdown.Toggle/> or a <Dropdown.Menu/>.
componentClasselementTypeButtonGroup
disabledbooleanfalse
dropupbooleanfalse
id requiredstring|numberAn html id attribute, necessary for assistive technologies, such as screen readers.
onClosefunctionA callback fired when the Dropdown closes.
onSelectfunction
A callback fired when a menu item is selected.
(eventKey: any, event: Object) => any
onTogglefunction
controls open
A callback fired when the Dropdown wishes to change visibility. Called with the requested open value.
function(Boolean isOpen) {}
openboolean
controlled by: onToggle, initial prop: defaultOpen
Whether or not the Dropdown is visible.
function(Boolean isOpen) {}
pullRightbooleanfalse
rolestringIf 'menuitem', causes the dropdown to behave like a menu item rather than a menu button.
targetstring
title requirednodeThe content of the split button.
toggleLabelstringAccessible label for the toggle; the value of title if not specified.

Dropdown

NameTypeDefaultDescription
bsClassstring'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.
childrennodeThe children of a Dropdown may be a <Dropdown.Toggle/> or a <Dropdown.Menu/>.
componentClasselementTypeButtonGroup
disabledbooleanfalseWhether or not component is disabled.
dropupbooleanfalseThe menu will open above the dropdown button, instead of below it.
id requiredstring|numberAn html id attribute, necessary for assistive technologies, such as screen readers.
onClosefunctionA callback fired when the Dropdown closes.
onSelectfunction
A callback fired when a menu item is selected.
(eventKey: any, event: Object) => any
onTogglefunction
controls open
A callback fired when the Dropdown wishes to change visibility. Called with the requested open value.
function(Boolean isOpen) {}
openboolean
controlled by: onToggle, initial prop: defaultOpen
Whether or not the Dropdown is visible.
function(Boolean isOpen) {}
pullRightbooleanfalseAlign the menu to the right side of the Dropdown toggle
rolestringIf 'menuitem', causes the dropdown to behave like a menu item rather than a menu button.