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: $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
- Default'a'
type
string children
node- Defaultnull
className
string
DropdownMenu Props API
children
node
DropdownButton Props API
children
node- Default'btn-light'
className
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.