React Dropdown Component API

Specifies the alignment of the React Dropdown Menu within this React Dropdown. An object becomes a responsive placement — { xs: 'start', lg: 'end' } reads as 'bottom-start lg:bottom-end' — and turns dynamic positioning off.

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

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.

Adds custom classes to the React Dropdown root element.

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. Inside a modal dialog it goes into the dialog instead, because the rest of the page is inert.

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

The initial open state of an uncontrolled dropdown — read once on mount.

Specifies the direction of the React Dropdown.

Provides a custom Floating UI configuration or a function that returns a modified configuration for advanced positioning of the React Dropdown Menu. [Read more](https://floating-ui.com/docs/computePosition#options)

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

Callback fired right before the React Dropdown becomes hidden.

Callback fired immediately after the React Dropdown is displayed.

Callback fired when the React Dropdown requests an open-state change — a dismiss gesture (Escape, outside click, item click) or, in uncontrolled mode, any internal toggle. In controlled mode update show yourself, or the dropdown stays as it is.

Where the React Dropdown Menu opens. It wins over direction and alignment; left unset, the menu follows them. A logical start or end side resolves to the side the writing direction puts it on, and breakpoint prefixes make the placement responsive — 'bottom-start md:top-end' reads as bottom-start below md and top-end from md up.

Enables or disables dynamic positioning for the React Dropdown Menu. When disabled, the menu is rendered statically and carries data-coreui-popper="static".

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

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.

Control the open state. When set, the dropdown renders what show says and dismiss gestures only call onShowChange — nothing closes until the parent flips the prop.

Defines the visual variant of the React Dropdown

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

Use defaultShow / show / onShowChange instead — visible is ignored when either of them is set.

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

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

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

Toggle the active state for the component.

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

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

Toggle the disabled state for the component.

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

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

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

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

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

Toggle the active state for the component. With toggle it is the controlled active state of the toggle button. For the uncontrolled toggle use defaultActive; manage the controlled state from onClick.

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

Enables pseudo element caret on toggler.

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

Sets the color context of the component to one of CoreUI’s themed colors.

Use theme instead — color renders the same theme-{color} class and loses to theme when both are set.

Create a custom toggler which accepts any content.

The initial active state of an uncontrolled toggle button — read once on mount. Ignored when active is set.

Toggle the disabled state for the component.

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

Square the button for a lone icon - remember to give it an aria-label.

Render the button as a link. It behaves like a button but takes its color from the link color rather than from a theme, so theme and variant do not apply to it.

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

The role attribute describes the role of an element in programs that can make use of it, such as screen readers or magnifiers.

Select the shape of the component.

Size the component extra small, small or large.

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.

Screen reader label for split button dropdown toggle.

Sets the color context of the component to one of CoreUI’s themed colors. Pair it with variant for the shape — a button is a shape plus a colour. The class may also sit on any ancestor, so theming a toolbar themes the buttons inside it.

Sets which event handlers you'd like provided to your toggle prop. You can specify one trigger or an array of them.

Set the shape of the button — how much ink it uses. Defaults to solid when theme is set.