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	22.20.3	9
frontend-app-course-authoring	23.15.1	17
frontend-app-discussions	23.14.2	1
frontend-app-learner-portal-enterprise	22.17.0	5
frontend-app-gradebook	23.4.5	2
frontend-app-profile	23.14.9	2
frontend-app-publisher	23.14.8	1
frontend-app-support-tools	23.4.2	4
frontend-component-header-edx	23.6.1	2
frontend-component-header	23.15.0	1
catalog-search	22.20.5	2

DropdownButton

Project Name	Paragon Version	Instance Count
frontend-app-course-authoring	23.15.1	11
frontend-app-discussions	23.14.2	1
frontend-app-learner-record	23.14.9	1
frontend-app-learner-record	23.4.5	1
frontend-component-header-edx	23.6.1	1

DropdownDivider

Project Name	Paragon Version	Instance Count
frontend-app-course-authoring	23.15.1	2
frontend-app-discussions	23.14.2	1
frontend-app-learner-portal-enterprise	22.17.0	2
frontend-app-library-authoring	21.11.3	2
frontend-component-header-edx	23.6.1	1

DropdownHeader

Project Name	Paragon Version	Instance Count
frontend-app-admin-portal	22.20.3	1
frontend-app-communications	23.12.2	2
frontend-app-learner-portal-enterprise	22.17.0	1
frontend-component-header-edx	23.6.1	1

DropdownItem

Project Name	Paragon Version	Instance Count
frontend-app-account	23.14.8	1
frontend-app-admin-portal	22.20.3	18
frontend-app-authn	23.14.0	14
frontend-app-communications	23.12.2	1
frontend-app-discussions	23.14.2	5
frontend-app-discussions	23.14.9	2
frontend-app-learner-record	23.14.9	1
frontend-app-gradebook	23.4.5	2
frontend-app-learner-record	23.4.5	14
frontend-app-profile	23.14.9	2
frontend-app-publisher	23.14.8	1
frontend-app-support-tools	23.4.2	8
frontend-component-header-edx	23.6.1	12
frontend-component-header	23.15.0	1
catalog-search	22.20.5	6

DropdownMenu

Project Name	Paragon Version	Instance Count
frontend-app-admin-portal	22.20.3	1
frontend-app-communications	23.12.2	14
frontend-app-course-authoring	23.15.1	15
frontend-app-discussions	23.14.2	1
frontend-app-discussions	23.14.9	1
frontend-app-learner-portal-enterprise	22.17.0	5
frontend-app-gradebook	23.4.5	2
frontend-app-profile	23.14.9	1
frontend-app-publisher	23.14.8	1
frontend-app-support-tools	23.4.2	4
frontend-component-header-edx	23.6.1	2
frontend-component-header	23.15.0	1
catalog-search	22.20.5	2

DropdownToggle

Project Name	Paragon Version	Instance Count
frontend-app-admin-portal	22.20.3	1
frontend-app-course-authoring	23.15.1	15
frontend-app-discussions	23.14.2	1
frontend-app-discussions	23.14.9	1
frontend-app-learner-portal-enterprise	22.17.0	5
frontend-app-gradebook	23.4.5	2
frontend-app-profile	23.14.9	1
frontend-app-publisher	23.14.8	1
frontend-app-support-tools	23.4.2	4
frontend-component-header-edx	23.6.1	2
frontend-component-header	23.15.0	1
catalog-search	22.20.5	2

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