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.
Dropdown.Deprecated
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: calc($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
nodeRequired
DropdownItem Props API
- typeDefault'a'
string - children
node - classNameDefaultnull
string
DropdownMenu Props API
- children
node
DropdownButton Props API
- children
node - classNameDefault'btn-light'
string
DropdownToggle Props API
- as
elementTypeDefaultButtonSpecifies the base element.
- bsPrefix
stringDefault'dropdown-toggle'Overrides underlying component base CSS class name.
- id
string|numberRequiredAn html id attribute, necessary for assistive technologies, such as screen readers.