Paragon Design System

Technical Documentation

Theme

PlaygroundBeta

npm_versionnpm Paragon package page

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.

<DropdownButton id="dropdown-basic-button" title="Dropdown button">

  <Dropdown.Item href="#/action-1">Action</Dropdown.Item>

  <Dropdown.Item href="#/action-2">Another action</Dropdown.Item>

  <Dropdown.Item href="#/action-3">Something else</Dropdown.Item>

</DropdownButton>

Advanced Usage

Any Paragon component or export may be added to the code example.

<>

  <Dropdown onToggle={(isOpen, event, metadata) => console.log('debug', 'onToggle', { isOpen, event, metadata })} className="mb-3">

    <Dropdown.Toggle variant="success" id="dropdown-basic-1">

      Dropdown Button

    </Dropdown.Toggle>

    <Dropdown.Menu>

      <Dropdown.Header>Header</Dropdown.Header>

      <Dropdown.Item>Action</Dropdown.Item>

      <Dropdown.Item>Another action</Dropdown.Item>

      <Dropdown.Divider />

      <Dropdown.Item>Something else</Dropdown.Item>

    </Dropdown.Menu>

  </Dropdown>



  <Dropdown variant="dark" onToggle={(isOpen, event, metadata) => console.log('debug', 'onToggle', { isOpen, event, metadata })} className="mb-3">

    <Dropdown.Toggle variant="success" id="dropdown-basic-2">

      Dark Variant

    </Dropdown.Toggle>

    <Dropdown.Menu>

      <Dropdown.Header>Header</Dropdown.Header>

      <Dropdown.Item>Action</Dropdown.Item>

      <Dropdown.Item>Another action</Dropdown.Item>

      <Dropdown.Divider />

      <Dropdown.Item>Something else</Dropdown.Item>

    </Dropdown.Menu>

  </Dropdown>

  <Dropdown autoClose={false} onToggle={(isOpen, event, metadata) => console.log('debug', 'onToggle', { isOpen, event, metadata })} className="mb-3">

    <Dropdown.Toggle variant="success" id="dropdown-basic-2">

      autoClose=false

    </Dropdown.Toggle>

    <Dropdown.Menu>

      <Dropdown.Header>Header</Dropdown.Header>

      <Dropdown.Item>Action</Dropdown.Item>

      <Dropdown.Item>Another action</Dropdown.Item>

      <Dropdown.Divider />

      <Dropdown.Item>Something else</Dropdown.Item>

    </Dropdown.Menu>

  </Dropdown>

  <Dropdown autoClose="inside" onToggle={(isOpen, event, metadata) => console.log('debug', 'onToggle', { isOpen, event, metadata })} className="mb-3">

    <Dropdown.Toggle variant="success" id="dropdown-basic-3">

      autoClose=inside

    </Dropdown.Toggle>

    <Dropdown.Menu>

      <Dropdown.Header>Header</Dropdown.Header>

      <Dropdown.Item>Action</Dropdown.Item>

      <Dropdown.Item>Another action</Dropdown.Item>

      <Dropdown.Divider />

      <Dropdown.Item>Something else</Dropdown.Item>

    </Dropdown.Menu>

  </Dropdown>

  <Dropdown autoClose="outside" onToggle={(isOpen, event, metadata) => console.log('debug', 'onToggle', { isOpen, event, metadata })} className="mb-3">

    <Dropdown.Toggle variant="success" id="dropdown-basic-4">

      autoClose=outside

    </Dropdown.Toggle>

    <Dropdown.Menu>

      <Dropdown.Header>Header</Dropdown.Header>

      <Dropdown.Item>Action</Dropdown.Item>

      <Dropdown.Item>Another action</Dropdown.Item>

      <Dropdown.Divider />

      <Dropdown.Item>Something else</Dropdown.Item>

    </Dropdown.Menu>

  </Dropdown>

</>

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>

  <Dropdown.Toggle

    id="dropdown-toggle-with-iconbutton"

    as={IconButton}

    src={MoreVert}

    iconAs={Icon}

    variant="primary"

  />

  <Dropdown.Menu>

    <Dropdown.Item href="#/action-1">Action</Dropdown.Item>

    <Dropdown.Item href="#/action-2">Another action</Dropdown.Item>

    <Dropdown.Item href="#/action-3">Something else</Dropdown.Item>

  </Dropdown.Menu>

</Dropdown>

Dropdown.Deprecated

Any Paragon component or export may be added to the code example.

<Dropdown.Deprecated>

  <Dropdown.Deprecated.Button>

    Search Engines

  </Dropdown.Deprecated.Button>

  <Dropdown.Deprecated.Menu>

    <Dropdown.Deprecated.Item href="https://google.com">Google</Dropdown.Deprecated.Item>

    <Dropdown.Deprecated.Item href="https://duckduckgo.com">DuckDuckGo</Dropdown.Deprecated.Item>

    <Dropdown.Deprecated.Item href="https://yahoo.com">Yahoo</Dropdown.Deprecated.Item>

  </Dropdown.Deprecated.Menu>

</Dropdown.Deprecated>

(Deprecated) with icon element

Any Paragon component or export may be added to the code example.

<Dropdown.Deprecated>

  <Dropdown.Deprecated.Button>

    <Icon className="fa fa-user pr-3" alt="" />

    Search Engines

  </Dropdown.Deprecated.Button>

  <Dropdown.Deprecated.Menu>

    <Dropdown.Deprecated.Item href="https://google.com">Google</Dropdown.Deprecated.Item>

    <Dropdown.Deprecated.Item href="https://duckduckgo.com">DuckDuckGo</Dropdown.Deprecated.Item>

    <Dropdown.Deprecated.Item href="https://yahoo.com">Yahoo</Dropdown.Deprecated.Item>

  </Dropdown.Deprecated.Menu>

</Dropdown.Deprecated>

(Deprecated) basic usage

Any Paragon component or export may be added to the code example.

<Dropdown.Deprecated

  title="Search Engines"

  menuItems={[

    {

      label: 'Google',

      href: 'https://google.com',

    },

    {

      label: 'DuckDuckGo',

      href: 'https://duckduckgo.com',

    },

    {

      label: 'Yahoo',

      href: 'https://yahoo.com',

    },

  ]}

/>

(Deprecated) menu items as elements

Any Paragon component or export may be added to the code example.

<Dropdown.Deprecated

  title="Search Engines"

  menuItems={[

    <a href="http://www.google.com">Google</a>,

    <a href="http://www.duckduckgo.com">DuckDuckGo</a>,

    <a href="http://www.yahoo.com">Yahoo</a>,

  ]}

/>

(Deprecated) with icon element

Any Paragon component or export may be added to the code example.

<Dropdown.Deprecated

  title="Search Engines"

  iconElement={<Icon className="fa fa-user pr-3" />}

  menuItems={[

    {

      label: 'Google',

      href: 'https://google.com',

    },

    {

      label: 'DuckDuckGo',

      href: 'https://duckduckgo.com',

    },

    {

      label: 'Yahoo',

      href: 'https://yahoo.com',

    },

  ]}

/>

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
  • children node
DropdownItem Props API
  • type string
    Default'a'
  • children node
  • className string
    Defaultnull
DropdownMenu Props API
  • children node
DropdownButton Props API
  • children node
  • className string
    Default'btn-light'
DropdownToggle Props API
  • 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-portal20.26.33
frontend-app-discussions20.15.01
frontend-app-learner-dashboard20.32.03
frontend-app-learner-portal-enterprise20.36.05
frontend-app-learning20.28.43
frontend-app-library-authoring20.30.12
frontend-app-profile20.32.01
frontend-app-publisher20.28.51
frontend-app-support-tools20.26.04
frontend-component-header-edx20.32.32
frontend-component-header20.36.02
catalog-search19.25.12
frontend-lib-content-components20.34.06
prospectus20.32.32

DropdownButton

Project NameParagon VersionInstance Count
frontend-app-discussions20.15.01
prospectus20.32.32

DropdownDivider

Project NameParagon VersionInstance Count
frontend-app-discussions20.15.01
frontend-app-learner-dashboard20.32.04
frontend-app-learner-portal-enterprise20.36.02

DropdownHeader

Project NameParagon VersionInstance Count
frontend-app-learner-dashboard20.32.02
frontend-app-learner-portal-enterprise20.36.01

DropdownItem

Project NameParagon VersionInstance Count
frontend-app-admin-portal20.26.39
frontend-app-discussions20.15.05
frontend-app-learner-dashboard20.32.017
frontend-app-learner-portal-enterprise20.36.011
frontend-app-learning20.28.42
frontend-app-library-authoring20.30.14
frontend-app-profile20.32.02
frontend-app-publisher20.28.51
frontend-app-support-tools20.26.08
frontend-component-header-edx20.32.37
frontend-component-header20.36.08
catalog-search19.25.15
frontend-lib-content-components20.34.013
prospectus20.32.33

DropdownMenu

Project NameParagon VersionInstance Count
frontend-app-admin-portal20.26.33
frontend-app-discussions20.15.01
frontend-app-learner-dashboard20.32.03
frontend-app-learner-portal-enterprise20.36.05
frontend-app-learning20.28.43
frontend-app-library-authoring20.30.12
frontend-app-profile20.32.01
frontend-app-publisher20.28.51
frontend-app-support-tools20.26.04
frontend-component-header-edx20.32.32
frontend-component-header20.36.02
catalog-search19.25.12
frontend-lib-content-components20.34.06
prospectus20.32.32

DropdownToggle

Project NameParagon VersionInstance Count
frontend-app-admin-portal20.26.33
frontend-app-discussions20.15.01
frontend-app-learner-dashboard20.32.03
frontend-app-learner-portal-enterprise20.36.05
frontend-app-learning20.28.43
frontend-app-library-authoring20.30.12
frontend-app-profile20.32.01
frontend-app-publisher20.28.51
frontend-app-support-tools20.26.04
frontend-component-header-edx20.32.32
frontend-component-header20.36.02
catalog-search19.25.12
frontend-lib-content-components20.34.06
prospectus20.32.32
Leave feedback

Contents

All components (A-Z)