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.
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:
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.
The size attribute can be applied to the
Dropdown component to specify the size of the toggle button:
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.