import { CDropdown } from '@coreui/react'// orimport 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'} | - |
| 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 | - |
| component | Component used for the root node. Either a string to use a HTML element or a component. | string | ComponentClass<any, any> | FunctionComponent<any> | div |
| container v4.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 | (() => Element) | - |
| 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 |
On this page