` content.
```html
import React from 'react'
import { CDropdownDivider, CDropdownItem, CDropdownMenu } from '@coreui/react'
export const DropdownMenuContentDividersExample = () => {
return (
Action
Another action
Something else here
Separated link
)
}
```
### 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.
```html
import React from 'react'
import { CDropdownMenu } from '@coreui/react'
export const DropdownMenuContentTextExample = () => {
return (
Some example text that's free-flowing within the dropdown menu.
And this is more example text.
)
}
```
### Forms
Put a form within a dropdown menu, or make it into a dropdown menu.
```html
import React from 'react'
import {
CButton,
CCheckbox,
CDropdownDivider,
CDropdownItem,
CDropdownMenu,
CForm,
CFormField,
CFormInput,
CFormLabel,
} from '@coreui/react'
export const DropdownMenuContentFormsExample = () => {
return (
Email address
Password
Sign in
New around here? Sign up
Forgot password?
)
}
```
## Dropdown options
Use `offset` to displace the dropdown from its default position. The value is a string with two numbers separated by a comma, e.g. `offset={[10, 20]}`. Use `portal` property to render dropdowns in `body` instead of the parent element. This helps to avoid any overflow or z-index issues.
```html
import React from 'react'
import { CButton, CDropdown, CDropdownItem, CDropdownMenu, CDropdownToggle } from '@coreui/react'
export const DropdownOptionsExample = () => {
return (
Offset
Action
Another action
Something else here
Portal
Reference
Action
Another action
Something else here
)
}
```
### Auto close behavior
By default, dropdowns are closed when clicking outside of the dropdown menu or the toggle button. You can change this behavior with the `autoClose` property. Set `autoClose` to:
- `true` - Close on clicks inside or outside of the React.js dropdown menu.
- `false` - Disable auto-close; close manually by setting the `show={false}` (also not closed by `Escape`).
- `'inside'` - Close only when clicking inside the React.js dropdown menu.
- `'outside'` - Close only when clicking outside the React.js dropdown menu.
```html
import React from 'react'
import { CDropdown, CDropdownItem, CDropdownMenu, CDropdownToggle } from '@coreui/react'
export const DropdownOptionsAutoCloseBehaviorExample = () => {
return (
Default dropdown
Action
Another action
Something else here
Clickable inside
Action
Another action
Something else here
Clickable outside
Action
Another action
Something else here
Manual close
Action
Another action
Something else here
)
}
```
## Controlled and uncontrolled
_Added in 6.0.0._
The dropdown works either way, and the prop you reach for is what picks the mode.
| | prop | who owns the open state |
| --- | --- | --- |
| Uncontrolled | `defaultShow` | the dropdown, from that starting point |
| Controlled | `show` | your component |
`onShowChange` fires in **both** modes whenever the dropdown requests an open-state change — a dismiss gesture (Escape, an outside click, an item click) or, in uncontrolled mode, any internal toggle. The deprecated `visible` prop keeps its old behavior and is ignored when `defaultShow` or `show` is set.
### Uncontrolled
Every example above is uncontrolled — the toggle manages the menu. `defaultShow` seeds it open on mount.
```jsx
```
### Controlled
Pass `show` and the dropdown renders what you pass — the toggle and the dismiss gestures only call `onShowChange`, so feed the change back, or nothing moves. Here an external button drives the same state the dropdown's own gestures request changes to.
```html
import React, { useState } from 'react'
import { CButton, CDropdown, CDropdownItem, CDropdownMenu, CDropdownToggle } from '@coreui/react'
export const DropdownControlledExample = () => {
const [show, setShow] = useState(false)
return (
setShow(!show)}>
{show ? 'Close the dropdown' : 'Open the dropdown'}
Dropdown button
Action
Another action
Something else here
)
}
```
Use it when the open state belongs to something else — a keyboard shortcut, a tour step, or a control outside the dropdown like the button above.
## API
Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
- [<CDropdown />](./api/#cdropdown)
- [<CDropdownDivider />](./api/#cdropdowndivider)
- [<CDropdownHeader />](./api/#cdropdownheader)
- [<CDropdownItem />](./api/#cdropdownitem)
- [<CDropdownItemPlain />](./api/#cdropdownitemplain)
- [<CDropdownMenu />](./api/#cdropdownmenu)
- [<CDropdownToggle />](./api/#cdropdowntoggle)