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
node
Required
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
elementType
DefaultButtonSpecifies the base element.
- bsPrefix
string
Default'dropdown-toggle'Overrides underlying component base CSS class name.
- id
string
|number
RequiredAn html id attribute, necessary for assistive technologies, such as screen readers.