Paragon Design System

Theme

Navigation
npm_versionnpm Paragon package page

Dropdown

Edit this pagein a new tabLeave feedbackin a new tab

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#

Dropdown Props API

This is a pass through component from React-Bootstrap, see original props documentation here.

  • children node
DropdownItem Props API

This is a pass through component from React-Bootstrap, see original props documentation here.

  • type string
    Default'a'
  • children node
  • className string
    Defaultnull
DropdownMenu Props API

This is a pass through component from React-Bootstrap, see original props documentation here.

  • children node
DropdownButton Props API

This is a pass through component from React-Bootstrap, see original props documentation here.

  • children node
  • className string
    Default'btn-light'
DropdownToggle Props API

This is a pass through component from React-Bootstrap, see original props documentation here.

  • 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.

Usage Insights#

Dropdown

Project NameParagon VersionInstance Count
frontend-app-admin-portal21.13.17
frontend-app-course-authoring22.8.121
frontend-app-discussions22.7.01
frontend-app-learner-dashboard22.9.01
frontend-app-learner-portal-enterprise21.13.15
frontend-app-learning22.8.13
frontend-app-library-authoring21.11.31
frontend-app-profile22.10.01
frontend-app-publisher21.13.11
frontend-app-support-tools21.13.14
frontend-component-header-edx21.13.12
frontend-component-header22.10.01
catalog-search21.13.12
prospectus20.46.25

DropdownButton

Project NameParagon VersionInstance Count
frontend-app-course-authoring22.8.11
frontend-app-discussions22.7.01
frontend-app-learner-record22.10.01
frontend-component-header-edx21.13.11
frontend-component-header22.10.01
prospectus20.46.22

DropdownDivider

Project NameParagon VersionInstance Count
frontend-app-course-authoring22.8.12
frontend-app-discussions22.7.01
frontend-app-learner-portal-enterprise21.13.12
frontend-component-header-edx21.13.11

DropdownHeader

Project NameParagon VersionInstance Count
frontend-app-admin-portal21.13.11
frontend-app-learner-portal-enterprise21.13.11
frontend-component-header-edx21.13.11

DropdownItem

Project NameParagon VersionInstance Count
frontend-app-account22.9.01
frontend-app-admin-portal21.13.114
frontend-app-course-authoring22.8.147
frontend-app-discussions22.7.05
frontend-app-learner-dashboard22.9.02
frontend-app-learner-portal-enterprise21.13.111
frontend-app-learner-record22.10.01
frontend-app-learning22.8.13
frontend-app-library-authoring21.11.32
frontend-app-profile22.10.02
frontend-app-publisher21.13.11
frontend-app-support-tools21.13.18
frontend-component-header-edx21.13.112
frontend-component-header22.10.02
catalog-search21.13.16
prospectus20.46.26

DropdownMenu

Project NameParagon VersionInstance Count
frontend-app-admin-portal21.13.17
frontend-app-course-authoring22.8.119
frontend-app-discussions22.7.01
frontend-app-learner-dashboard22.9.01
frontend-app-learner-portal-enterprise21.13.15
frontend-app-learning22.8.13
frontend-app-library-authoring21.11.31
frontend-app-profile22.10.01
frontend-app-publisher21.13.11
frontend-app-support-tools21.13.14
frontend-component-header-edx21.13.12
frontend-component-header22.10.01
catalog-search21.13.12
prospectus20.46.25

DropdownToggle

Project NameParagon VersionInstance Count
frontend-app-admin-portal21.13.17
frontend-app-course-authoring22.8.119
frontend-app-discussions22.7.01
frontend-app-learner-dashboard22.9.01
frontend-app-learner-portal-enterprise21.13.15
frontend-app-learning22.8.13
frontend-app-library-authoring21.11.31
frontend-app-profile22.10.01
frontend-app-publisher21.13.11
frontend-app-support-tools21.13.14
frontend-component-header-edx21.13.12
frontend-component-header22.10.01
catalog-search21.13.12
prospectus20.46.25
Edit this pagein a new tabLeave feedbackin a new tab

Contents

All components (A-Z)