Dropdown
This is a pass through component from React-Bootstrap.
See React-Bootstrap for documentation.
Basic Usage
Any Paragon component or export may be added to the code example.
Advanced Usage
Any Paragon component or export may be added to the code example.
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
.
Any Paragon component or export may be added to the code example.
Dropdown.Deprecated
Any Paragon component or export may be added to the code example.
(Deprecated) with icon element
Any Paragon component or export may be added to the code example.
(Deprecated) basic usage
Any Paragon component or export may be added to the code example.
(Deprecated) menu items as elements
Any Paragon component or export may be added to the code example.
(Deprecated) with icon element
Any Paragon component or export may be added to the code example.
Theme Variables (SCSS)#
$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;
Props API#
This is a pass through component from React-Bootstrap, see original props documentation here.
- children
node
This is a pass through component from React-Bootstrap, see original props documentation here.
- typeDefault'a'
string
- children
node
- classNameDefaultnull
string
This is a pass through component from React-Bootstrap, see original props documentation here.
- children
node
This is a pass through component from React-Bootstrap, see original props documentation here.
- children
node
- classNameDefault'btn-light'
string
This is a pass through component from React-Bootstrap, see original props documentation here.
- 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.
Usage Insights#
Dropdown
Project Name | Paragon Version | Instance Count | |
---|---|---|---|
frontend-app-admin-portal | 21.13.1 | 6 | |
frontend-app-course-authoring | 22.8.1 | 22 | |
frontend-app-discussions | 22.7.0 | 1 | |
frontend-app-learner-dashboard | 22.8.1 | 1 | |
frontend-app-learner-portal-enterprise | 21.13.1 | 5 | |
frontend-app-learning | 22.8.1 | 3 | |
frontend-app-library-authoring | 21.11.3 | 1 | |
frontend-app-profile | 22.8.1 | 1 | |
frontend-app-publisher | 21.13.1 | 1 | |
frontend-app-support-tools | 21.13.1 | 4 | |
frontend-component-header-edx | 21.11.4 | 2 | |
frontend-component-header | 22.8.1 | 1 | |
catalog-search | 21.13.1 | 2 | |
prospectus | 20.46.2 | 5 |
DropdownButton
Project Name | Paragon Version | Instance Count | |
---|---|---|---|
frontend-app-course-authoring | 22.8.1 | 1 | |
frontend-app-discussions | 22.7.0 | 1 | |
frontend-app-learner-record | 22.8.1 | 1 | |
frontend-component-header-edx | 21.11.4 | 1 | |
frontend-component-header | 22.8.1 | 1 | |
prospectus | 20.46.2 | 2 |
DropdownDivider
Project Name | Paragon Version | Instance Count | |
---|---|---|---|
frontend-app-course-authoring | 22.8.1 | 2 | |
frontend-app-discussions | 22.7.0 | 1 | |
frontend-app-learner-portal-enterprise | 21.13.1 | 2 | |
frontend-component-header-edx | 21.11.4 | 1 |
DropdownHeader
Project Name | Paragon Version | Instance Count | |
---|---|---|---|
frontend-app-admin-portal | 21.13.1 | 1 | |
frontend-app-learner-portal-enterprise | 21.13.1 | 1 | |
frontend-component-header-edx | 21.11.4 | 1 |
DropdownItem
Project Name | Paragon Version | Instance Count | |
---|---|---|---|
frontend-app-account | 22.0.0 | 1 | |
frontend-app-admin-portal | 21.13.1 | 14 | |
frontend-app-course-authoring | 22.8.1 | 52 | |
frontend-app-discussions | 22.7.0 | 5 | |
frontend-app-learner-dashboard | 22.8.1 | 2 | |
frontend-app-learner-portal-enterprise | 21.13.1 | 11 | |
frontend-app-learner-record | 22.8.1 | 1 | |
frontend-app-learning | 22.8.1 | 3 | |
frontend-app-library-authoring | 21.11.3 | 2 | |
frontend-app-profile | 22.8.1 | 2 | |
frontend-app-publisher | 21.13.1 | 1 | |
frontend-app-support-tools | 21.13.1 | 8 | |
frontend-component-header-edx | 21.11.4 | 12 | |
frontend-component-header | 22.8.1 | 6 | |
catalog-search | 21.13.1 | 6 | |
prospectus | 20.46.2 | 6 |
DropdownMenu
Project Name | Paragon Version | Instance Count | |
---|---|---|---|
frontend-app-admin-portal | 21.13.1 | 6 | |
frontend-app-course-authoring | 22.8.1 | 20 | |
frontend-app-discussions | 22.7.0 | 1 | |
frontend-app-learner-dashboard | 22.8.1 | 1 | |
frontend-app-learner-portal-enterprise | 21.13.1 | 5 | |
frontend-app-learning | 22.8.1 | 3 | |
frontend-app-library-authoring | 21.11.3 | 1 | |
frontend-app-profile | 22.8.1 | 1 | |
frontend-app-publisher | 21.13.1 | 1 | |
frontend-app-support-tools | 21.13.1 | 4 | |
frontend-component-header-edx | 21.11.4 | 2 | |
frontend-component-header | 22.8.1 | 1 | |
catalog-search | 21.13.1 | 2 | |
prospectus | 20.46.2 | 5 |
DropdownToggle
Project Name | Paragon Version | Instance Count | |
---|---|---|---|
frontend-app-admin-portal | 21.13.1 | 6 | |
frontend-app-course-authoring | 22.8.1 | 20 | |
frontend-app-discussions | 22.7.0 | 1 | |
frontend-app-learner-dashboard | 22.8.1 | 1 | |
frontend-app-learner-portal-enterprise | 21.13.1 | 5 | |
frontend-app-learning | 22.8.1 | 3 | |
frontend-app-library-authoring | 21.11.3 | 1 | |
frontend-app-profile | 22.8.1 | 1 | |
frontend-app-publisher | 21.13.1 | 1 | |
frontend-app-support-tools | 21.13.1 | 4 | |
frontend-component-header-edx | 21.11.4 | 2 | |
frontend-component-header | 22.8.1 | 1 | |
catalog-search | 21.13.1 | 2 | |
prospectus | 20.46.2 | 5 |