React Menu Component API

Configures the auto close behavior: - true — closes on a click inside or outside the menu, - 'inside' — closes on a click inside the menu only, - 'outside' — closes on a click outside the menu only, - false — closes only on the toggle or the Escape key.

Adds a custom class name to the React Menu wrapper.

The element the panel is rendered into instead of document.body. Implies portal. Inside a modal dialog it goes into the dialog instead, because the rest of the page is inert.

Renders the panel in the dark theme.

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

The distance of the panel from its toggle, as [skidding, distance].

Callback fired when the menu is hidden.

Callback fired when the menu is shown.

Callback fired when the menu 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 menu stays as it is.

Where the panel opens. Breakpoint prefixes make it responsive — 'bottom-start md:top-end' reads as bottom-start below md and top-end from md up. A logical start or end side resolves to the side the writing direction puts it on; -start and -end are already logical, so they follow the direction on their own.

Renders the panel through a portal.

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

Controls the visibility of the menu.

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

Adds a custom class name to the React Menu panel.

The height at which a scrollable panel starts scrolling.

Renders the panel with its own scrollbar once it grows past maxHeight.

Give the menu a translucent, blurred surface.

Adds a custom class name to the React Menu divider.

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

Adds a custom class name to the React Menu header.

Toggle the active state for the component.

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

Adds a custom class name to the React Menu item.

Toggle the disabled state for the component.

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

Marks the item as the current selection.

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

Adds a custom class name to the React Menu text.

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.

Adds a custom class name to the React Menu toggle.

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.

Wire the menu to a toggle of your own instead of rendering a button. The single child element receives the toggle behavior and keeps its own markup and classes.

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.

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.

Renders the toggle as the second half of a split button, so only it opens the menu.

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.

Make the button behave as a toggle button. It manages its own active/pressed state, toggling it on click and reflecting it via the aria-pressed attribute.

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

Adds a custom class name to the React Submenu wrapper.

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

Callback fired when the submenu requests an open-state change — hover, click or the keyboard. In controlled mode update show yourself, or the submenu stays as it is.

Control the open state. When set, the submenu renders what show says and only calls onShowChange.

The trigger the nested menu opens from. Rendered as the submenu's own .menu-item.