
```jsx
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:<br/>- `true` - the dropdown will be closed by clicking outside or inside the dropdown menu.<br/>- `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)<br/>- `'inside'` - the dropdown will be closed (only) by clicking inside the dropdown menu.<br/>- `'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 |
