Are you ready for Cyber ~~Monday~~ Week Deals?

Extra 25% off for all sale items + Free CoreUI Icons PRO with every order! Limited offer for the first 100 people, use code 2024BWCW25 during checkout.

React Dropdown Component

Dropdown

React dropdown component allows you to toggle contextual overlays for displaying lists, links, and more html elements.

Other frameworks

CoreUI components are available as native Angular, Bootstrap (Vanilla JS), and Vue components. To learn more please visit the following pages.

On this page

Overview#

Dropdowns are toggleable, contextual overlays for displaying lists of links and more.

Dropdowns are built on a third party library, Popper.js, which provides dynamic positioning and viewport detection. Popper.js isn't used to position dropdowns in navbars though as dynamic positioning isn't required.

Examples#

Bind the dropdown's toggle and the dropdown menu inside <CDropdown>, or different element that declares position: relative;. Dropdowns can be triggered from <a> or <button> elements to better fit your possible requirements.

Single button#

Here's how you can put them to work with either <button> elements:

<CDropdown>
  <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
  <CDropdownMenu>
    <CDropdownItem href="#">Action</CDropdownItem>
    <CDropdownItem href="#">Another action</CDropdownItem>
    <CDropdownItem href="#">Something else here</CDropdownItem>
  </CDropdownMenu>
</CDropdown>

And with <a> elements:

<CDropdown>
  <CDropdownToggle href="#" color="secondary">Dropdown button</CDropdownToggle>
  <CDropdownMenu>
    <CDropdownItem href="#">Action</CDropdownItem>
    <CDropdownItem href="#">Another action</CDropdownItem>
    <CDropdownItem href="#">Something else here</CDropdownItem>
  </CDropdownMenu>
</CDropdown>

The best part is you can do this with any button variant, too:

<>
  {['primary', 'secondary', 'success', 'info', 'warning', 'danger'].map((color, index) => (
    <CDropdown variant="btn-group" key={index}>
      <CDropdownToggle color={color}>{color}</CDropdownToggle>
      <CDropdownMenu>
        <CDropdownItem href="#">Action</CDropdownItem>
        <CDropdownItem href="#">Another action</CDropdownItem>
        <CDropdownItem href="#">Something else here</CDropdownItem>
        <CDropdownDivider />
        <CDropdownItem href="#">Separated link</CDropdownItem>
      </CDropdownMenu>
    </CDropdown>
  ))}
</>

Split button#

Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of boolean prop split for proper spacing around the dropdown caret.

We use this extra class to reduce the horizontal padding on either side of the caret by 25% and remove the margin-left that's attached for normal button dropdowns. Those additional changes hold the caret centered in the split button and implement a more properly sized hit area next to the main button.

<>
  {['primary', 'secondary', 'success', 'info', 'warning', 'danger'].map((color, index) => (
    <CDropdown variant="btn-group" key={index}>
      <CButton color={color}>{color}</CButton>
      <CDropdownToggle color={color} split />
      <CDropdownMenu>
        <CDropdownItem href="#">Action</CDropdownItem>
        <CDropdownItem href="#">Another action</CDropdownItem>
        <CDropdownItem href="#">Something else here</CDropdownItem>
        <CDropdownDivider />
        <CDropdownItem href="#">Separated link</CDropdownItem>
      </CDropdownMenu>
    </CDropdown>
  ))}
</>

Sizing#

Button dropdowns work with buttons of all sizes, including default and split dropdown buttons.

<CDropdown variant="btn-group">
    <CDropdownToggle color="secondary" size="lg">Large button</CDropdownToggle>
    <CDropdownMenu>
      <CDropdownItem href="#">Action</CDropdownItem>
      <CDropdownItem href="#">Another action</CDropdownItem>
      <CDropdownItem href="#">Something else here</CDropdownItem>
      <CDropdownDivider/>
      <CDropdownItem href="#">Separated link</CDropdownItem>
    </CDropdownMenu>
  </CDropdown>

  <CDropdown variant="btn-group">
    <CButton color="secondary" size="lg">Large split button</CButton>
    <CDropdownToggle color="secondary" size="lg" split/>
    <CDropdownMenu>
      <CDropdownItem href="#">Action</CDropdownItem>
      <CDropdownItem href="#">Another action</CDropdownItem>
      <CDropdownItem href="#">Something else here</CDropdownItem>
      <CDropdownDivider/>
      <CDropdownItem href="#">Separated link</CDropdownItem>
    </CDropdownMenu>
  </CDropdown>

<CDropdown variant="btn-group">
    <CDropdownToggle color="secondary" size="sm">Small button</CDropdownToggle>
    <CDropdownMenu>
      <CDropdownItem href="#">Action</CDropdownItem>
      <CDropdownItem href="#">Another action</CDropdownItem>
      <CDropdownItem href="#">Something else here</CDropdownItem>
      <CDropdownDivider/>
      <CDropdownItem href="#">Separated link</CDropdownItem>
    </CDropdownMenu>
  </CDropdown>

  <CDropdown variant="btn-group">
    <CButton color="secondary" size="sm">Small split button</CButton>
    <CDropdownToggle color="secondary" size="sm"split/>
    <CDropdownMenu>
      <CDropdownItem href="#">Action</CDropdownItem>
      <CDropdownItem href="#">Another action</CDropdownItem>
      <CDropdownItem href="#">Something else here</CDropdownItem>
      <CDropdownDivider/>
      <CDropdownItem href="#">Separated link</CDropdownItem>
    </CDropdownMenu>
  </CDropdown>

Dark dropdowns#

Opt into darker dropdowns to match a dark navbar or custom style by set dark property. No changes are required to the dropdown items.

<CDropdown dark>
  <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
  <CDropdownMenu>
    <CDropdownItem href="#">Action</CDropdownItem>
    <CDropdownItem href="#">Another action</CDropdownItem>
    <CDropdownItem href="#">Something else here</CDropdownItem>
    <CDropdownDivider />
    <CDropdownItem href="#">Separated link</CDropdownItem>
  </CDropdownMenu>
</CDropdown>

And putting it to use in a navbar:

<CNavbar expand="lg" colorScheme="dark" className="bg-dark">
  <CContainer fluid>
    <CNavbarBrand href="#">Navbar</CNavbarBrand>
    <CNavbarToggler aria-label="Toggle navigation" aria-expanded={true} />
    <CCollapse className="navbar-collapse" visible={true}>
      <CNavbarNav>
        <CDropdown dark as="li" variant="nav-item">
          <CDropdownToggle color="dark">Dropdown</CDropdownToggle>
          <CDropdownMenu>
            <CDropdownItem href="#">Action</CDropdownItem>
            <CDropdownItem href="#">Another action</CDropdownItem>
            <CDropdownItem href="#">Something else here</CDropdownItem>
            <CDropdownDivider />
            <CDropdownItem href="#">Separated link</CDropdownItem>
          </CDropdownMenu>
        </CDropdown>
      </CNavbarNav>
    </CCollapse>
  </CContainer>
</CNavbar>

Directions#

RTL

Directions are mirrored when using CoreUI in RTL, meaning .dropstart will appear on the right side.

Centered#

Make the dropdown menu centered below the toggle by adding direction="center" to the <CDropdown> component.

<CDropdown variant="btn-group" direction="center">
  <CDropdownToggle color="secondary">Centered dropdown</CDropdownToggle>
  <CDropdownMenu>
    <CDropdownItem href="#">Action</CDropdownItem>
    <CDropdownItem href="#">Another action</CDropdownItem>
    <CDropdownItem href="#">Something else here</CDropdownItem>
    <CDropdownDivider/>
    <CDropdownItem href="#">Separated link</CDropdownItem>
  </CDropdownMenu>
</CDropdown>

Dropup#

Trigger dropdown menus above elements by adding direction="dropup" to the <CDropdown> component.

<CDropdown variant="btn-group" direction="dropup">
    <CDropdownToggle color="secondary">Dropdown</CDropdownToggle>
    <CDropdownMenu>
      <CDropdownItem href="#">Action</CDropdownItem>
      <CDropdownItem href="#">Another action</CDropdownItem>
      <CDropdownItem href="#">Something else here</CDropdownItem>
      <CDropdownDivider/>
      <CDropdownItem href="#">Separated link</CDropdownItem>
    </CDropdownMenu>
  </CDropdown>

  <CDropdown variant="btn-group" direction="dropup">
    <CButton color="secondary" >Small split button</CButton>
    <CDropdownToggle color="secondary" split/>
    <CDropdownMenu>
      <CDropdownItem href="#">Action</CDropdownItem>
      <CDropdownItem href="#">Another action</CDropdownItem>
      <CDropdownItem href="#">Something else here</CDropdownItem>
      <CDropdownDivider/>
      <CDropdownItem href="#">Separated link</CDropdownItem>
    </CDropdownMenu>
  </CDropdown>

Dropup centered#

Make the dropup menu centered above the toggle by adding direction="dropup-center" to the <CDropdown> component.

<CDropdown variant="btn-group" direction="dropup-center">
  <CDropdownToggle color="secondary">Centered dropup</CDropdownToggle>
  <CDropdownMenu>
    <CDropdownItem href="#">Action</CDropdownItem>
    <CDropdownItem href="#">Another action</CDropdownItem>
    <CDropdownItem href="#">Something else here</CDropdownItem>
    <CDropdownDivider/>
    <CDropdownItem href="#">Separated link</CDropdownItem>
  </CDropdownMenu>
</CDropdown>

Dropend#

Trigger dropdown menus at the right of the elements by adding direction="dropend" to the <CDropdown> component.

<CDropdown variant="btn-group" direction="dropend">
    <CDropdownToggle color="secondary">Dropdown</CDropdownToggle>
    <CDropdownMenu>
      <CDropdownItem href="#">Action</CDropdownItem>
      <CDropdownItem href="#">Another action</CDropdownItem>
      <CDropdownItem href="#">Something else here</CDropdownItem>
      <CDropdownDivider/>
      <CDropdownItem href="#">Separated link</CDropdownItem>
    </CDropdownMenu>
  </CDropdown>

  <CDropdown variant="btn-group" direction="dropend">
    <CButton color="secondary" >Small split button</CButton>
    <CDropdownToggle color="secondary" split/>
    <CDropdownMenu>
      <CDropdownItem href="#">Action</CDropdownItem>
      <CDropdownItem href="#">Another action</CDropdownItem>
      <CDropdownItem href="#">Something else here</CDropdownItem>
      <CDropdownDivider/>
      <CDropdownItem href="#">Separated link</CDropdownItem>
    </CDropdownMenu>
  </CDropdown>

Dropstart#

Trigger dropdown menus at the left of the elements by adding direction="dropstart" to the <CDropdown> component.

<CDropdown variant="btn-group" direction="dropstart">
    <CDropdownToggle color="secondary">Dropdown</CDropdownToggle>
    <CDropdownMenu>
      <CDropdownItem href="#">Action</CDropdownItem>
      <CDropdownItem href="#">Another action</CDropdownItem>
      <CDropdownItem href="#">Something else here</CDropdownItem>
      <CDropdownDivider/>
      <CDropdownItem href="#">Separated link</CDropdownItem>
    </CDropdownMenu>
  </CDropdown>

  <CButtonGroup>
    <CDropdown variant="btn-group" direction="dropstart">
      <CDropdownToggle color="secondary" split/>
      <CDropdownMenu>
        <CDropdownItem href="#">Action</CDropdownItem>
        <CDropdownItem href="#">Another action</CDropdownItem>
        <CDropdownItem href="#">Something else here</CDropdownItem>
        <CDropdownDivider/>
        <CDropdownItem href="#">Separated link</CDropdownItem>
      </CDropdownMenu>
    </CDropdown>
    <CButton color="secondary" >Small split button</CButton>
  </CButtonGroup>

Historically dropdown menu contents had to be links, but that's no longer the case with v4. Now you can optionally use <button> elements in your dropdowns instead of just <a>s.

<CDropdown>
  <CDropdownToggle color="secondary">Dropdown</CDropdownToggle>
  <CDropdownMenu>
    <CDropdownItem as="button">Action</CDropdownItem>
    <CDropdownItem as="button">Another action</CDropdownItem>
    <CDropdownItem as="button">Something else here</CDropdownItem>
    <CDropdownDivider />
    <CDropdownItem as="button">Separated link</CDropdownItem>
  </CDropdownMenu>
</CDropdown>

You can also create non-interactive dropdown items with <CDropdownItemPlain>.

<CDropdownMenu>
  <CDropdownItemPlain>Dropdown item text</CDropdownItemPlain>
  <CDropdownItem href="#">Action</CDropdownItem>
  <CDropdownItem href="#">Another action</CDropdownItem>
  <CDropdownItem href="#">Something else here</CDropdownItem>
</CDropdownMenu>

Active#

Set boolean property active to style item as active.

In the following example we use div instead of <CDropdownMenu> to show <CDropdownMenu> content.

<CDropdownMenu>
  <CDropdownItem href="#">Regular link</CDropdownItem>
  <CDropdownItem href="#" active>Active link</CDropdownItem>
  <CDropdownItem href="#">Another link</CDropdownItem>
</CDropdownMenu>

Disabled#

Add disabled boolean property to items in the dropdown to style them as disabled.

In the following example we use div instead of <CDropdownMenu> to show <CDropdownMenu> content.

<CDropdownMenu>
  <CDropdownItem href="#">Regular link</CDropdownItem>
  <CDropdownItem href="#" disabled>Disabled link</CDropdownItem>
  <CDropdownItem href="#">Another link</CDropdownItem>
</CDropdownMenu>

By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add aligment="end" to right align the dropdown menu.

Heads up! Dropdowns are positioned thanks to Popper.

<CDropdown alignment="end">
  <CDropdownToggle color="secondary">Right-aligned menu example</CDropdownToggle>
  <CDropdownMenu>
    <CDropdownItem href="#">Action</CDropdownItem>
    <CDropdownItem href="#">Another action</CDropdownItem>
    <CDropdownItem href="#">Something else here</CDropdownItem>
    <CDropdownDivider />
    <CDropdownItem href="#">Separated link</CDropdownItem>
  </CDropdownMenu>
</CDropdown>

Responsive alignment#

If you use responsive alignment, dynamic positioning is disabled.

To align right the dropdown menu with the given breakpoint or larger, add aligment="xs|sm|md|lg|xl|xxl: end".

<CDropdown alignment={{ lg: 'end' }}>
  <CDropdownToggle color="secondary">Left-aligned but right aligned when large screen</CDropdownToggle>
  <CDropdownMenu>
    <CDropdownItem href="#">Action</CDropdownItem>
    <CDropdownItem href="#">Another action</CDropdownItem>
    <CDropdownItem href="#">Something else here</CDropdownItem>
    <CDropdownDivider />
    <CDropdownItem href="#">Separated link</CDropdownItem>
  </CDropdownMenu>
</CDropdown>

To align left the dropdown menu with the given breakpoint or larger, add aligment="xs|sm|md|lg|xl|xxl: start".

<CDropdown alignment={{ xs: 'end', lg: 'start' }}>
  <CDropdownToggle color="secondary">Right-aligned but left aligned when large screen</CDropdownToggle>
  <CDropdownMenu>
    <CDropdownItem href="#">Action</CDropdownItem>
    <CDropdownItem href="#">Another action</CDropdownItem>
    <CDropdownItem href="#">Something else here</CDropdownItem>
    <CDropdownDivider />
    <CDropdownItem href="#">Separated link</CDropdownItem>
  </CDropdownMenu>
</CDropdown>

Headers#

Add a header to label sections of actions in any dropdown menu.

In the following example we use div instead of <CDropdownMenu> to show <CDropdownMenu> content.

<CDropdownMenu>
  <CDropdownHeader>Dropdown header</CDropdownHeader>
  <CDropdownItem href="#">Action</CDropdownItem>
  <CDropdownItem href="#">Another action</CDropdownItem>
</CDropdownMenu>

Dividers#

Separate groups of related menu items with a divider.

In the following example we use div instead of <CDropdownMenu> to show <CDropdownMenu> content.

<CDropdownMenu>
  <CDropdownItem href="#">Action</CDropdownItem>
  <CDropdownItem href="#">Another action</CDropdownItem>
  <CDropdownItem href="#">Something else here</CDropdownItem>
  <CDropdownDivider />
  <CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>

Text#

Place any freeform text within a dropdown menu with text. Note that you'll likely need additional sizing styles to constrain the menu width.

<CDropdownMenu className="p-4 text-body-secondary" style={{ maxWidth: '200px' }}>
  <p>Some example text that's free-flowing within the dropdown menu.</p>
  <p className="mb-0">And this is more example text.</p>
</CDropdownMenu>

Forms#

Put a form within a dropdown menu, or make it into a dropdown menu.

<CDropdownMenu>
  <CForm className="px-4 py-4">
    <div className="mb-3">
      <CFormLabel htmlFor="exampleDropdownFormEmail1">Email address</CFormLabel>
      <CFormInput type="email" id="exampleDropdownFormEmail1" placeholder="[email protected]" />
    </div>
    <div className="mb-3">
      <CFormLabel htmlFor="exampleDropdownFormPassword1">Password</CFormLabel>
      <CFormInput type="password" id="exampleDropdownFormPassword1" placeholder="Password" />
    </div>
    <div className="mb-3">
      <CFormCheck id="dropdownCheck" label="Remember me" />
    </div>
    <CButton color="primary" type="submit">Sign in</CButton>
  </CForm>
  <CDropdownDivider />
  <CDropdownItem href="#">New around here? Sign up</CDropdownItem>
  <CDropdownItem href="#">Forgot password?</CDropdownItem>
</CDropdownMenu>

Customizing#

CSS variables#

React dropdowns use local CSS variables on .dropdown for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.

--cui-dropdown-zindex: #{$zindex-dropdown};
--cui-dropdown-min-width: #{$dropdown-min-width};
--cui-dropdown-padding-x: #{$dropdown-padding-x};
--cui-dropdown-padding-y: #{$dropdown-padding-y};
--cui-dropdown-spacer: #{$dropdown-spacer};
@include rfs($dropdown-font-size, --cui-dropdown-font-size);
--cui-dropdown-color: #{$dropdown-color};
--cui-dropdown-bg: #{$dropdown-bg};
--cui-dropdown-border-color: #{$dropdown-border-color};
--cui-dropdown-border-radius: #{$dropdown-border-radius};
--cui-dropdown-border-width: #{$dropdown-border-width};
--cui-dropdown-inner-border-radius: #{$dropdown-inner-border-radius};
--cui-dropdown-divider-bg: #{$dropdown-divider-bg};
--cui-dropdown-divider-margin-y: #{$dropdown-divider-margin-y};
--cui-dropdown-box-shadow: #{$dropdown-box-shadow};
--cui-dropdown-link-color: #{$dropdown-link-color};
--cui-dropdown-link-hover-color: #{$dropdown-link-hover-color};
--cui-dropdown-link-hover-bg: #{$dropdown-link-hover-bg};
--cui-dropdown-link-active-color: #{$dropdown-link-active-color};
--cui-dropdown-link-active-bg: #{$dropdown-link-active-bg};
--cui-dropdown-link-disabled-color: #{$dropdown-link-disabled-color};
--cui-dropdown-item-padding-x: #{$dropdown-item-padding-x};
--cui-dropdown-item-padding-y: #{$dropdown-item-padding-y};
--cui-dropdown-header-color: #{$dropdown-header-color};
--cui-dropdown-header-padding-x: #{$dropdown-header-padding-x};
--cui-dropdown-header-padding-y: #{$dropdown-header-padding-y};

Customization through CSS variables can be seen on the .dropdown-menu-dark class where we override specific values without adding duplicate CSS selectors.

--cui-dropdown-color: #{$dropdown-dark-color};
--cui-dropdown-bg: #{$dropdown-dark-bg};
--cui-dropdown-border-color: #{$dropdown-dark-border-color};
--cui-dropdown-box-shadow: #{$dropdown-dark-box-shadow};
--cui-dropdown-link-color: #{$dropdown-dark-link-color};
--cui-dropdown-link-hover-color: #{$dropdown-dark-link-hover-color};
--cui-dropdown-divider-bg: #{$dropdown-dark-divider-bg};
--cui-dropdown-link-hover-bg: #{$dropdown-dark-link-hover-bg};
--cui-dropdown-link-active-color: #{$dropdown-dark-link-active-color};
--cui-dropdown-link-active-bg: #{$dropdown-dark-link-active-bg};
--cui-dropdown-link-disabled-color: #{$dropdown-dark-link-disabled-color};
--cui-dropdown-header-color: #{$dropdown-dark-header-color};

How to use CSS variables#

const vars = { 
  '--my-css-var': 10,
  '--my-another-css-var': "red" 
}
return <CDropdown style={vars}>...</CDropdown>

SASS variables#

$dropdown-min-width:                10rem !default;
$dropdown-padding-x:                0 !default;
$dropdown-padding-y:                .5rem !default;
$dropdown-spacer:                   .125rem !default;
$dropdown-font-size:                $font-size-base !default;
$dropdown-color:                    var(--cui-body-color) !default;
$dropdown-bg:                       var(--cui-body-bg) !default;
$dropdown-border-color:             var(--cui-border-color-translucent) !default;
$dropdown-border-radius:            var(--cui-border-radius) !default;
$dropdown-border-width:             var(--cui-border-width) !default;
$dropdown-inner-border-radius:      calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default; // stylelint-disable-line function-disallowed-list
$dropdown-divider-bg:               $dropdown-border-color !default;
$dropdown-divider-margin-y:         $spacer * .5 !default;
$dropdown-box-shadow:               var(--cui-box-shadow) !default;

$dropdown-link-color:               var(--cui-body-color) !default;
$dropdown-link-hover-color:         $dropdown-link-color !default;
$dropdown-link-hover-bg:            var(--cui-tertiary-bg) !default;

$dropdown-link-active-color:        $component-active-color !default;
$dropdown-link-active-bg:           $component-active-bg !default;

$dropdown-link-disabled-color:      var(--cui-tertiary-color) !default;

$dropdown-item-padding-y:           $spacer * .25 !default;
$dropdown-item-padding-x:           $spacer !default;

$dropdown-header-color:             $gray-600 !default;
$dropdown-header-padding-x:         $dropdown-item-padding-x !default;
$dropdown-header-padding-y:         $dropdown-padding-y !default;
// fusv-disable
$dropdown-header-padding:           $dropdown-header-padding-y $dropdown-header-padding-x !default; // Deprecated in v4.2.6
// fusv-enable

Variables for the dark dropdown:

$dropdown-dark-color:               $gray-300 !default;
$dropdown-dark-bg:                  $gray-800 !default;
$dropdown-dark-border-color:        $dropdown-border-color !default;
$dropdown-dark-divider-bg:          $dropdown-divider-bg !default;
$dropdown-dark-box-shadow:          null !default;
$dropdown-dark-link-color:          $dropdown-dark-color !default;
$dropdown-dark-link-hover-color:    $white !default;
$dropdown-dark-link-hover-bg:       rgba($white, .15) !default;
$dropdown-dark-link-active-color:   $dropdown-link-active-color !default;
$dropdown-dark-link-active-bg:      $dropdown-link-active-bg !default;
$dropdown-dark-link-disabled-color: $gray-500 !default;
$dropdown-dark-header-color:        $gray-500 !default;

Variables for the CSS-based carets that indicate a dropdown's interactivity:

$caret-width:                 .3em !default;
$caret-vertical-align:        $caret-width * .85 !default;
$caret-spacing:               $caret-width * .85 !default;

API#

CDropdown#

import { CDropdown } from '@coreui/react'
// or
import CDropdown from '@coreui/react/src/components/dropdown/CDropdown'

Property	Description	Type	Default
alignment	Set aligment of dropdown menu.	`'start'` \| `'end'` \| `{ xs: 'start'` \| `'end' }` \| `{ sm: 'start'` \| `'end' }` \| `{ md: 'start'` \| `'end' }` \| `{ lg: 'start'` \| `'end' }` \| `{ xl: 'start'` \| `'end'}` \| `{ xxl: 'start'` \| `'end'}`	-
as	Component used for the root node. Either a string to use a HTML element or a component.	`(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'div')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)`	div
autoClose	Configure the auto close behavior of the dropdown: - `true` - the dropdown will be closed by clicking outside or inside the dropdown menu. - `false` - the dropdown will be closed by clicking the toggle button and manually calling hide or toggle method. (Also will not be closed by pressing esc key) - `'inside'` - the dropdown will be closed (only) by clicking inside the dropdown menu. - `'outside'` - the dropdown will be closed (only) by clicking outside the dropdown menu.	`boolean` \| `'inside'` \| `'outside'`	true
className	A string of all className you want applied to the base component.	`string`	-
container 4.11.0+	Appends the react dropdown menu to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`.	`Element` \| `DocumentFragment` \| `(() => Element` \| `DocumentFragment)`	-
dark	Sets a darker color scheme to match a dark navbar.	`boolean`	-
direction	Sets a specified direction and location of the dropdown menu.	`'center'` \| `'dropup'` \| `'dropup-center'` \| `'dropend'` \| `'dropstart'`	-
offset	Offset of the dropdown menu relative to its target.	`[number, number]`	[0, 2]
onHide 4.9.0+	Callback fired when the component requests to be hidden.	`() => void`	-
onShow	Callback fired when the component requests to be shown.	`() => void`	-
placement	Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property.	`'auto'` \| `'top-end'` \| `'top'` \| `'top-start'` \| `'bottom-end'` \| `'bottom'` \| `'bottom-start'` \| `'right-start'` \| `'right'` \| `'right-end'` \| `'left-start'` \| `'left'` \| `'left-end'`	bottom-start
popper	If you want to disable dynamic positioning set this property to `true`.	`boolean`	true
portal 4.8.0+	Generates dropdown menu using createPortal.	`boolean`	false
variant	Set the dropdown variant to an btn-group, dropdown, input-group, and nav-item.	`'btn-group'` \| `'dropdown'` \| `'input-group'` \| `'nav-item'`	btn-group
visible	Toggle the visibility of dropdown menu component.	`boolean`	false

CDropdownDivider#

import { CDropdownDivider } from '@coreui/react'
// or
import CDropdownDivider from '@coreui/react/src/components/dropdown/CDropdownDivider'

Property	Description	Type	Default
className	A string of all className you want applied to the component.	`string`	-

CDropdownHeader#

import { CDropdownHeader } from '@coreui/react'
// or
import CDropdownHeader from '@coreui/react/src/components/dropdown/CDropdownHeader'

Property	Description	Type	Default
as	Component used for the root node. Either a string to use a HTML element or a component.	`(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'h6')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)`	-
className	A string of all className you want applied to the component.	`string`	-

CDropdownItem#

import { CDropdownItem } from '@coreui/react'
// or
import CDropdownItem from '@coreui/react/src/components/dropdown/CDropdownItem'

Property	Description	Type	Default
active	Toggle the active state for the component.	`boolean`	-
as	Component used for the root node. Either a string to use a HTML element or a component.	`(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'a')` \| `(ElementType & 'cite')` \| `(ElementType & 'data')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)`	a
className	A string of all className you want applied to the component.	`string`	-
disabled	Toggle the disabled state for the component.	`boolean`	-
href	The href attribute specifies the URL of the page the link goes to.	`string`	-

CDropdownItemPlain#

import { CDropdownItemPlain } from '@coreui/react'
// or
import CDropdownItemPlain from '@coreui/react/src/components/dropdown/CDropdownItemPlain'

Property	Description	Type	Default
as	Component used for the root node. Either a string to use a HTML element or a component.	`(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'span')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)`	-
className	A string of all className you want applied to the component.	`string`	-

CDropdownMenu#

import { CDropdownMenu } from '@coreui/react'
// or
import CDropdownMenu from '@coreui/react/src/components/dropdown/CDropdownMenu'

Property	Description	Type	Default
as	Component used for the root node. Either a string to use a HTML element or a component.	`(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'ul')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)`	-
className	A string of all className you want applied to the base component.	`string`	-

CDropdownToggle#

import { CDropdownToggle } from '@coreui/react'
// or
import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownToggle'

Property	Description	Type	Default
active	Toggle the active state for the component.	`boolean`	-
as	Component used for the root node. Either a string to use a HTML element or a component.	`ElementType`	-
caret	Enables pseudo element caret on toggler.	`boolean`	true
className	A string of all className you want applied to the base component.	`string`	-
color	Sets the color context of the component to one of CoreUI’s themed colors.	`'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string`	-
custom	Create a custom toggler which accepts any content.	`boolean`	-
disabled	Toggle the disabled state for the component.	`boolean`	-
href	The href attribute specifies the URL of the page the link goes to.	`string`	-
navLink 5.0.0+	If a dropdown `variant` is set to `nav-item` then render the toggler as a link instead of a button.	`boolean`	true
role	The role attribute describes the role of an element in programs that can make use of it, such as screen readers or magnifiers.	`string`	-
shape	Select the shape of the component.	`'rounded'` \| `'rounded-top'` \| `'rounded-end'` \| `'rounded-bottom'` \| `'rounded-start'` \| `'rounded-circle'` \| `'rounded-pill'` \| `'rounded-0'` \| `'rounded-1'` \| `'rounded-2'` \| `'rounded-3'` \| `string`	-
size	Size the component small or large.	`'sm'` \| `'lg'`	-
split	Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of `.dropdown-toggle-split` className for proper spacing around the dropdown caret.	`boolean`	-
trigger	Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.	`'hover'` \| `'focus'` \| `'click'`	click
variant	Set the button variant to an outlined button or a ghost button.	`'outline'` \| `'ghost'`	-

React Dropdown Component

Dropdown

Other frameworks

Overview#

Examples#

Single button#

Split button#

Sizing#

Dark dropdowns#

Directions#

RTL

Centered#

Dropup#

Dropup centered#

Dropend#

Dropstart#

Menu items#

Active#

Disabled#

Menu alignment#

Responsive alignment#

Menu content#

Headers#

Dividers#

Text#

Forms#

Customizing#

CSS variables#

How to use CSS variables#

SASS variables#

API#

CDropdown#

CDropdownDivider#

CDropdownHeader#

CDropdownItem#

CDropdownItemPlain#

CDropdownMenu#

CDropdownToggle#