React Dropdown Component API

Dropdown API

New Year sale. Skyrocket your business in 2025!

Extra 25% off for all sale items + Free CoreUI Icons PRO with every order!
Limited-time offer for the first 100 customers in 2025. Use code 2025SKY25 at checkout.

Get offer!

Explore the API reference for the React Dropdown component and discover how to effectively utilize its props for customization.

On this page

CDropdown#

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

Property	Default	Type
alignment#	-	`'start'`, `'end'`, `{ xs: 'start' \| 'end' }`, `{ sm: 'start' \| 'end' }`, `{ md: 'start' \| 'end' }`, `{ lg: 'start' \| 'end' }`, `{ xl: 'start' \| 'end'}`, `{ xxl: 'start' \| 'end'}`
Set aligment of dropdown menu.
as#	`div`	`(ElementType & 'symbol')`, `(ElementType & 'object')`, `(ElementType & 'div')`, `(ElementType & 'slot')`, `(ElementType & 'style')`, `... 174 more ...`, `(ElementType & FunctionComponent<...>)`
Component used for the root node. Either a string to use a HTML element or a component.
autoClose#	`true`	`boolean`, `'inside'`, `'outside'`
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.
className#	-	`string`
A string of all className you want applied to the base component.
container#4.11.0+	-	`Element`, `DocumentFragment`, `(() => Element \| DocumentFragment)`
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`.
dark#	-	`boolean`
Sets a darker color scheme to match a dark navbar.
direction#	-	`'center'`, `'dropup'`, `'dropup-center'`, `'dropend'`, `'dropstart'`
Sets a specified direction and location of the dropdown menu.
offset#	`[0, 2]`	`[number, number]`
Offset of the dropdown menu relative to its target.
onHide#4.9.0+	-	`() => void`
Callback fired when the component requests to be hidden.
onShow#	-	`() => void`
Callback fired when the component requests to be shown.
placement#	`bottom-start`	`'auto'`, `'top-end'`, `'top'`, `'top-start'`, `'bottom-end'`, `'bottom'`, `'bottom-start'`, `'right-start'`, `'right'`, `'right-end'`, `'left-start'`, `'left'`, `'left-end'`
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.
popper#	`true`	`boolean`
If you want to disable dynamic positioning set this property to `true`.
portal#4.8.0+	`false`	`boolean`
Generates dropdown menu using createPortal.
variant#	`btn-group`	`'btn-group'`, `'dropdown'`, `'input-group'`, `'nav-item'`
Set the dropdown variant to an btn-group, dropdown, input-group, and nav-item.
visible#	`false`	`boolean`
Toggle the visibility of dropdown menu component.

CDropdownDivider#

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

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

CDropdownHeader#

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

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

CDropdownItem#

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

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

CDropdownItemPlain#

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

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

CDropdownMenu#

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

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

CDropdownToggle#

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

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