Dropdown

Dropdowns can be used to hide content from the user if e.g. too many buttons would be required or if the items donlsquo;t have to be used often.

Basic Usage

The dropdown component is a wrapper around both the button and the dropdown content. The wrapper component controls its children and should only have two: One DropdownToggle (or a component that produces a single DropdownToggle child) and a DropdownMenu that defines the content of the dropdown menu. The DropdownMenu should have a collection of DropdownItem children, of which there are multiple types: headers, dividers and menu items:

Alignment

The alignment of the menu container relative to the toggle button can be controlled using the right attribute which causes the menu to be right-aligned. By default the menu will be right-aligned.

Size

The size attribute can be applied to the Dropdown component to specify the size of the toggle button:

Uncontrolled Variant

There is also an uncontrolled variant of the dropdown component that covers that most basic use-case. You won‘t need to supply an isOpen or a toggle parameter because it will do that by itself.