Hire Us Get CoreUI PRO all-access →

React Dropdown Component API

Dropdown API

Markdown ChatGPT Claude

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

On this page

CDropdown

jsx 
import { CDropdown } from '@coreui/react-pro'
PropertyDefaultType
alignment-'start', 'end', { xs: 'start' | 'end' }, { sm: 'start' | 'end' }, { md: 'start' | 'end' }, { lg: 'start' | 'end' }, { xl: 'start' | 'end'}, { xxl: 'start' | 'end'}

Specifies the alignment of the React Dropdown Menu within this React Dropdown.

asdiv(ElementType & 'symbol'), (ElementType & 'object'), (ElementType & 'div'), (ElementType & 'slot'), (ElementType & 'style'), ... 175 more ..., undefined

Determines the root node component (native HTML element or a custom React component) for the React Dropdown.

autoClosetrueboolean, 'inside', 'outside', undefined

Configures automatic closing behavior for the React Dropdown: - true - Close on clicks inside or outside of the React Dropdown Menu. - false - Disable auto-close; manually call hide or toggle (also not closed by Escape). - 'inside' - Close only when clicking inside the React Dropdown Menu. - 'outside' - Close only when clicking outside the React Dropdown Menu.

className-string, undefined

Adds custom classes to the React Dropdown root element.

container4.11.0+-Element, DocumentFragment, (() => Element | DocumentFragment | null), null, undefined

Appends the React Dropdown Menu to a specific element. You can pass an HTML element or a function returning an element. Defaults to document.body.

dark-boolean, undefined

Applies a darker color scheme to the React Dropdown Menu, often used within dark navbars.

direction-'center', 'dropup', 'dropup-center', 'dropend', 'dropstart', undefined

Specifies the direction of the React Dropdown.

offset[0, 2][number, number], undefined

Defines x and y offsets ([x, y]) for the React Dropdown Menu relative to its target.

onHide4.9.0+-(() => void), undefined

Callback fired right before the React Dropdown becomes hidden.

onShow-(() => void), undefined

Callback fired immediately after the React Dropdown is displayed.

placementbottom-start'auto', 'auto-start', 'auto-end', 'top-end', 'top', 'top-start', 'bottom-end', 'bottom', 'bottom-start', 'right-start', 'right', 'right-end', 'left-start', 'left', 'left-end'

Determines the placement of the React Dropdown Menu after Popper.js modifiers.

poppertrueboolean, undefined

Enables or disables dynamic positioning via Popper.js for the React Dropdown Menu.

popperConfig5.5.0+-Partial<Options>, ((defaultPopperConfig: Partial<Options>) => Partial<Options>), undefined

Provides a custom Popper.js configuration or a function that returns a modified Popper.js configuration for advanced positioning of the React Dropdown Menu. [Read more](https://popper.js.org/docs/v2/constructors/#options)

portal4.8.0+-boolean, undefined

Renders the React Dropdown Menu using a React Portal, allowing it to escape the DOM hierarchy for improved positioning.

reference5.9.0+toggleHTMLElement, 'parent', 'toggle', RefObject<HTMLElement, null>, undefined

Sets the reference element for positioning the React Dropdown Menu. - toggle - The React Dropdown Toggle button (default). - parent - The React Dropdown wrapper element. - HTMLElement - A custom HTML element. - React.RefObject - A custom reference element.

variantdropdown'btn-group', 'dropdown', 'input-group', 'nav-item', undefined

Defines the visual variant of the React Dropdown

visible-boolean, undefined

Controls the visibility of the React Dropdown Menu: - true - Visible - false - Hidden

CDropdownDivider

jsx 
import { CDropdownDivider } from '@coreui/react-pro'
PropertyDefaultType
className-string, undefined

A string of all className you want applied to the component.

CDropdownHeader

jsx 
import { CDropdownHeader } from '@coreui/react-pro'
PropertyDefaultType
ash6(ElementType & 'symbol'), (ElementType & 'object'), (ElementType & 'h6'), (ElementType & 'slot'), (ElementType & 'style'), ... 175 more ..., undefined

Component used for the root node. Either a string to use a HTML element or a component.

className-string, undefined

A string of all className you want applied to the component.

CDropdownItem

jsx 
import { CDropdownItem } from '@coreui/react-pro'
PropertyDefaultType
active-boolean, undefined

Toggle the active state for the component.

asa(ElementType & 'symbol'), (ElementType & 'object'), (ElementType & 'a'), (ElementType & 'cite'), (ElementType & 'data'), ... 175 more ..., undefined

Component used for the root node. Either a string to use a HTML element or a component.

className-string, undefined

A string of all className you want applied to the component.

disabled-boolean, undefined

Toggle the disabled state for the component.

href-string, undefined

The href attribute specifies the URL of the page the link goes to.

CDropdownItemPlain

jsx 
import { CDropdownItemPlain } from '@coreui/react-pro'
PropertyDefaultType
asspan(ElementType & 'symbol'), (ElementType & 'object'), (ElementType & 'span'), (ElementType & 'slot'), (ElementType & 'style'), ... 175 more ..., undefined

Component used for the root node. Either a string to use a HTML element or a component.

className-string, undefined

A string of all className you want applied to the component.

CDropdownMenu

jsx 
import { CDropdownMenu } from '@coreui/react-pro'
PropertyDefaultType
asul(ElementType & 'symbol'), (ElementType & 'object'), (ElementType & 'ul'), (ElementType & 'slot'), (ElementType & 'style'), ... 175 more ..., undefined

Component used for the root node. Either a string to use a HTML element or a component.

className-string, undefined

A string of all className you want applied to the base component.

CDropdownToggle

jsx 
import { CDropdownToggle } from '@coreui/react-pro'
PropertyDefaultType
active-boolean, undefined

Toggle the active state for the component.

as-ElementType, undefined

Component used for the root node. Either a string to use a HTML element or a component.

carettrueboolean, undefined

Enables pseudo element caret on toggler.

className-string, undefined

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, undefined

Create a custom toggler which accepts any content.

disabled-boolean, undefined

Toggle the disabled state for the component.

href-string, undefined

The href attribute specifies the URL of the page the link goes to.

If a dropdown variant is set to nav-item then render the toggler as a link instead of a button.

role-string, undefined

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', undefined

Size the component small or large.

split-boolean, undefined

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.

splitLabel5.9.0+Toggle Dropdownstring, undefined

Screen reader label for split button dropdown toggle.

triggerclick'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', undefined

Set the button variant to an outlined button or a ghost button.