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

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	20.46.3	4
frontend-app-course-authoring	21.5.6	12
frontend-app-discussions	20.46.3	1
frontend-app-learner-dashboard	20.46.2	2
frontend-app-learner-portal-enterprise	20.45.4	5
frontend-app-learning	20.46.0	3
frontend-app-profile	20.46.3	1
frontend-app-publisher	20.46.3	1
frontend-app-support-tools	20.46.0	4
frontend-component-header-edx	21.5.6	2
frontend-component-header	21.5.6	1
catalog-search	20.45.0	2
frontend-lib-content-components	21.5.6	5
prospectus	20.46.2	2

DropdownButton

Project Name	Paragon Version	Instance Count
frontend-app-course-authoring	21.5.6	1
frontend-app-discussions	20.46.3	1
frontend-app-learner-record	20.46.3	1
frontend-component-header-edx	21.5.6	1
frontend-component-header	21.5.6	1
prospectus	20.46.2	2

DropdownDivider

Project Name	Paragon Version	Instance Count
frontend-app-course-authoring	21.5.6	2
frontend-app-discussions	20.46.3	1
frontend-app-learner-dashboard	20.46.2	2
frontend-app-learner-portal-enterprise	20.45.4	2

DropdownHeader

	Project Name	Paragon Version	Instance Count
	frontend-app-learner-dashboard	20.46.2	1
	frontend-app-learner-portal-enterprise	20.45.4	1

DropdownItem

Project Name	Paragon Version	Instance Count
frontend-app-admin-portal	20.46.3	12
frontend-app-course-authoring	21.5.6	32
frontend-app-discussions	20.46.3	5
frontend-app-learner-dashboard	20.46.2	9
frontend-app-learner-portal-enterprise	20.45.4	11
frontend-app-learner-record	20.46.3	1
frontend-app-learning	20.46.0	3
frontend-app-profile	20.46.3	2
frontend-app-publisher	20.46.3	1
frontend-app-support-tools	20.46.0	8
frontend-component-header-edx	21.5.6	9
frontend-component-header	21.5.6	6
catalog-search	20.45.0	5
frontend-lib-content-components	21.5.6	12
prospectus	20.46.2	3

DropdownMenu

Project Name	Paragon Version	Instance Count
frontend-app-admin-portal	20.46.3	4
frontend-app-course-authoring	21.5.6	12
frontend-app-discussions	20.46.3	1
frontend-app-learner-dashboard	20.46.2	2
frontend-app-learner-portal-enterprise	20.45.4	5
frontend-app-learning	20.46.0	3
frontend-app-profile	20.46.3	1
frontend-app-publisher	20.46.3	1
frontend-app-support-tools	20.46.0	4
frontend-component-header-edx	21.5.6	2
frontend-component-header	21.5.6	1
catalog-search	20.45.0	2
frontend-lib-content-components	21.5.6	5
prospectus	20.46.2	2

DropdownToggle

Project Name	Paragon Version	Instance Count
frontend-app-admin-portal	20.46.3	4
frontend-app-course-authoring	21.5.6	12
frontend-app-discussions	20.46.3	1
frontend-app-learner-dashboard	20.46.2	2
frontend-app-learner-portal-enterprise	20.45.4	5
frontend-app-learning	20.46.0	3
frontend-app-profile	20.46.3	1
frontend-app-publisher	20.46.3	1
frontend-app-support-tools	20.46.0	4
frontend-component-header-edx	21.5.6	2
frontend-component-header	21.5.6	1
catalog-search	20.45.0	2
frontend-lib-content-components	21.5.6	5
prospectus	20.46.2	2

Edit this page Leave feedback

Paragon Design System

Theme

Dropdown

Basic Usage

Advanced Usage

With IconButton

Theme Variables#

Props API#

Usage Insights#

Dropdown

DropdownButton

DropdownDivider

DropdownHeader

DropdownItem

DropdownMenu

DropdownToggle

All components (A-Z)

Theme

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