Dropdown

This is a pass through component from React-Bootstrap.
See React-Bootstrap for documentation.

Basic Usage

Advanced Usage

With IconButton

You can use Dropdown.Toggle with IconButton component, note that all props you provide to Dropdown.Toggle will get passed down to the IconButton.


with icon element

(Deprecated) basic usage

(Deprecated) menu items as elements

(Deprecated) with icon element

Theme Variables (SCSS)

// Dropdowns
//
// Dropdown menu container and contents.
$dropdown-min-width: 18rem !default;
$dropdown-padding-x: 0 !default;
$dropdown-padding-y: .5rem !default;
$dropdown-spacer: .125rem !default;
$dropdown-font-size: $font-size-base !default;
$dropdown-color: $body-color !default;
$dropdown-bg: $white !default;
$dropdown-border-color: rgba($black, .15) !default;
$dropdown-border-radius: $border-radius !default;
$dropdown-border-width: $border-width !default;
$dropdown-inner-border-radius: calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default;
$dropdown-divider-bg: theme-color("gray", "background") !default;
$dropdown-divider-margin-y: $spacer / 2 !default;
$dropdown-box-shadow: 0 .5rem 1rem rgba($black, .175) !default;
$dropdown-link-color: theme-color("gray", "dark-text") !default;
$dropdown-link-hover-color: darken(theme-color("gray", "dark-text"), 5%) !default;
$dropdown-link-hover-bg: $light-300 !default;
$dropdown-link-active-color: $component-active-color !default;
$dropdown-link-active-bg: $component-active-bg !default;
$dropdown-link-disabled-color: theme-color("gray", "light-text") !default;
$dropdown-item-padding-y: .25rem !default;
$dropdown-item-padding-x: 1rem !default;
$dropdown-header-color: theme-color("gray", "light-text") !default;
$dropdown-header-padding: $dropdown-padding-y $dropdown-item-padding-x !default;
Dropdown Props API
  • children
    node Required
DropdownItem Props API
  • type
    string
    Default'a'
  • children
    node
  • className
    string
    Defaultnull
DropdownMenu Props API
  • children
    node
DropdownButton Props API
  • children
    node
  • className
    string
    Default'btn-light'
DropdownToggle Props API
  • as
    elementType

    Specifies the base element.

    DefaultButton
  • bsPrefix
    string

    Overrides underlying component base CSS class name.

    Default'dropdown-toggle'
  • id
    string | number Required

    An html id attribute, necessary for assistive technologies, such as screen readers.