Dropdown

useBsDropdown returns the trigger's props and the panel, rendered at the end of <body> while open. The trigger is a menu button: a click toggles it, ArrowDown and ArrowUp open it on the first and the last item. Escape, a click outside, tabbing out or choosing an item closes it, and focus returns to the trigger. placement is bottom-start (the default), bottom-end, top-start or top-end; it flips when there is no room.

Any content

With hasPopup: 'dialog' the panel holds content that is not a menu and takes focus itself.

A menu in place

BsDropdownMenu works on its own too; give it a label.

Source

import { BsDropdownDivider, BsDropdownHeader, BsDropdownItem, BsDropdownMenu, useBsDropdown } from '@mintplayer/react-bootstrap/dropdown';const [props, dropdown] = useBsDropdown({  content: (    <BsDropdownMenu onItemSelect={({ value }) => setChosen(String(value))}>      <BsDropdownHeader>File</BsDropdownHeader>      <BsDropdownItem value="new">New</BsDropdownItem>      <BsDropdownItem value="save" disabled>Save</BsDropdownItem>      <BsDropdownDivider />      <BsDropdownItem><a href="https://getbootstrap.com">Bootstrap</a></BsDropdownItem>    </BsDropdownMenu>  ),});<button type="button" className="btn btn-primary" {...props}>Actions</button>{dropdown}