Dropdowns

Disables both Buttons

An href passed to the Toggle component

An html id attribute for the Toggle button, necessary for assistive technologies, such as screen readers.

Aligns the dropdown menu responsively.

see DropdownMenu for more details

An ARIA accessible role applied to the Menu component. When set to 'menu', The dropdown

An onClick handler passed to the Toggle component

Whether to render the dropdown menu in the DOM before the first time it is shown

Which event when fired outside the component will cause it to be closed.

see DropdownMenu for more details

The content of the non-toggle Button.

Disables both Buttons

An href passed to the non-toggle Button

An html id attribute for the Toggle button, necessary for assistive technologies, such as screen readers.

Aligns the dropdown menu responsively.

see DropdownMenu for more details

An ARIA accessible role applied to the Menu component. When set to 'menu', The dropdown

An onClick handler passed to the non-toggle Button

Whether to render the dropdown menu in the DOM before the first time it is shown

Which event when fired outside the component will cause it to be closed.

see DropdownMenu for more details

An anchor target passed to the non-toggle Button

The content of the non-toggle Button.

Accessible label for the toggle; the value of title if not specified.

A type passed to the non-toggle Button

Align the menu to the right side of the Dropdown toggle

Determines the direction and location of the Menu in relation to it's Toggle.

Allow Dropdown to flip in case of an overlapping on the reference element. For more information refer to Popper.js's flip docs.

Controls the focus behavior for when the Dropdown is opened. Set to true to always focus the first menu item, keyboard to focus only when navigating via the keyboard, or false to disable completely

The Default behavior is false unless the Menu has a role="menu" where it will default to keyboard to match the recommended ARIA Authoring practices.

A callback fired when a menu item is selected.

(eventKey: any, event: Object) => any

A callback fired when the Dropdown wishes to change visibility. Called with the requested show value, the DOM event, and the source that fired it: 'click','keydown','rootClose', or 'select'.

function(
  isOpen: boolean,
  event: SyntheticEvent,
  metadata: {
    source: 'select' | 'click' | 'rootClose' | 'keydown'
  }
): void

Whether or not the Dropdown is visible.

to passthrough to the underlying button or whatever from DropdownButton

An html id attribute, necessary for assistive technologies, such as screen readers.

Aligns the dropdown menu to the specified side of the container. You can also align the menu responsively for breakpoints starting at sm and up. The alignment direction will affect the specified breakpoint or larger.

Note: Using responsive alignment will disable Popper usage for positioning.

Aligns the Dropdown menu to the right of it's container.

Control the rendering of the DropdownMenu. All non-menu props (listed here) are passed through to the as Component.

If providing a custom, non DOM, component. the show, close and alignRight props are also injected and should be handled appropriately.

Have the dropdown switch to it's opposite placement when necessary to stay on screen.

A set of popper options and props passed directly to Popper.

Whether to render the dropdown menu in the DOM before the first time it is shown

Which event when fired outside the component will cause it to be closed

Note: For custom dropdown components, you will have to pass the rootCloseEvent to <RootCloseWrapper> in your custom dropdown menu component (similarly to how it is implemented in <Dropdown.Menu>).

Controls the visibility of the Dropdown menu

Highlight the menu item as active.

Disable the menu item, making it unselectable.

Value passed to the onSelect handler, useful for identifying the selected menu item.

HTML href attribute corresponding to a.href.

Callback fired when the menu item is clicked.

Callback fired when the menu item is selected.

(eventKey: any, event: Object) => any