Dropdown

This is a pass through component from React-Bootstrap.

See React-Bootstrap for documentation.

Basic Usage

Show editable code example

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>

<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

Show editable code example

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>
</>

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

Show editable code example

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"
    aria-label="More actions"
  />
  <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>
  <Dropdown.Toggle
    id="dropdown-toggle-with-iconbutton"
    as={IconButton}
    src={MoreVert}
    iconAs={Icon}
    variant="primary"
    aria-label="More actions"
  />
  <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>

Theme Variables#

CSS Variable	Computed Value
‌	‌
‌	‌
‌	‌
‌	‌
‌	‌

Props API#

DropdownToggle Props API

This is a pass through component from React-Bootstrap; see original props documentation here. You can also pass any HTML attributes, such as onClick, role, etc. Which attributes are available depends on whether or not you have overriden the underlying HTML element using the as property.

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 Name	Paragon Version	Instance Count
frontend-app-admin-portal	21.13.1	8
frontend-app-course-authoring	22.8.1	20
frontend-app-discussions	22.7.0	1
frontend-app-learner-dashboard	22.9.0	1
frontend-app-learner-portal-enterprise	21.13.1	5
frontend-app-learning	22.10.0	2
frontend-app-library-authoring	21.11.3	1
frontend-app-profile	22.10.0	1
frontend-app-publisher	21.13.1	1
frontend-app-support-tools	21.13.1	4
frontend-component-header-edx	21.13.1	2
frontend-component-header	22.10.0	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.10.0	1
frontend-component-header-edx	21.13.1	1
frontend-component-header	22.10.0	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.13.1	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.13.1	1

DropdownItem

Project Name	Paragon Version	Instance Count
frontend-app-account	22.10.0	1
frontend-app-admin-portal	21.13.1	16
frontend-app-course-authoring	22.8.1	45
frontend-app-discussions	22.7.0	5
frontend-app-learner-dashboard	22.9.0	2
frontend-app-learner-portal-enterprise	21.13.1	11
frontend-app-learner-record	22.10.0	1
frontend-app-learning	22.10.0	2
frontend-app-library-authoring	21.11.3	2
frontend-app-profile	22.10.0	2
frontend-app-publisher	21.13.1	1
frontend-app-support-tools	21.13.1	8
frontend-component-header-edx	21.13.1	12
frontend-component-header	22.10.0	2
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	8
frontend-app-course-authoring	22.8.1	18
frontend-app-discussions	22.7.0	1
frontend-app-learner-dashboard	22.9.0	1
frontend-app-learner-portal-enterprise	21.13.1	5
frontend-app-learning	22.10.0	2
frontend-app-library-authoring	21.11.3	1
frontend-app-profile	22.10.0	1
frontend-app-publisher	21.13.1	1
frontend-app-support-tools	21.13.1	4
frontend-component-header-edx	21.13.1	2
frontend-component-header	22.10.0	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	8
frontend-app-course-authoring	22.8.1	18
frontend-app-discussions	22.7.0	1
frontend-app-learner-dashboard	22.9.0	1
frontend-app-learner-portal-enterprise	21.13.1	5
frontend-app-learning	22.10.0	2
frontend-app-library-authoring	21.11.3	1
frontend-app-profile	22.10.0	1
frontend-app-publisher	21.13.1	1
frontend-app-support-tools	21.13.1	4
frontend-component-header-edx	21.13.1	2
frontend-component-header	22.10.0	1
catalog-search	21.13.1	2
prospectus	20.46.2	5

Edit this page Leave feedback

Paragon Design System

Dropdown

Basic Usage

Advanced Usage

With IconButton

Theme Variables#

Props API#

Usage Insights#

Dropdown

DropdownButton

DropdownDivider

DropdownHeader

DropdownItem

DropdownMenu

DropdownToggle

All components (A-Z)

Dropdown

Basic Usage#

Advanced Usage#

With IconButton#

Theme Variables#

Props API#

Usage Insights#

Dropdown

DropdownButton

DropdownDivider

DropdownHeader

DropdownItem

DropdownMenu

DropdownToggle

All components (A-Z)

Basic Usage

Advanced Usage

With IconButton