Dropdown is set of structural components for building, accessible dropdown menus with close-on-click, keyboard navigation, and correct focus handling. As with all the react-overlay's components it's BYOS (Bring Your Own Styles). Dropdown is primarily built from three base components, you should compose to build your Dropdowns.

Dropdown: wraps the menu and toggle, and handles keyboard navigation
Dropdown.Toggle: generally a button that triggers the menu opening
Dropdown.Menu: the overlaid, menu, positioned to the toggle with PopperJS

const MenuContainer = styled("div")`
  display: ${(p) => (p.show ? "flex" : "none")};
  min-width: 150px;
  position: absolute;
  z-index: 1000;
  flex-direction: column;
  border: 1px solid #e5e5e5;
  background-color: white;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
`;

const Menu = ({ role }) => {
  const { show, onClose, props } = useDropdownMenu({
    flip: true,
    offset: [0, 8],
  });
  return (
    <MenuContainer {...props} role={role} show={show}>
      <button
        type="button"
        onClick={onClose}
        className="text-left hover:bg-brand-100 px-6 py-2"
      >
        Item 1
      </button>
      <button
        type="button"
        onClick={onClose}
        className="text-left hover:bg-brand-100 px-6 py-2"
      >
        Item 2
      </button>
    </MenuContainer>
  );
};

const Toggle = ({ id, children }) => {
  const [props, { show, toggle }] = useDropdownToggle();
  return (
    <button
      type="button"
      className="btn"
      id={id}
      {...props}
      onClick={toggle}
    >
      {children}
    </button>
  );
};

const DropdownButton = ({
  show,
  onToggle,
  drop,
  alignEnd,
  title,
  role,
}) => (
  <Dropdown
    show={show}
    onToggle={onToggle}
    drop={drop}
    alignEnd={alignEnd}
    itemSelector="button:not(:disabled)"
  >
    {({ props }) => (
      <div {...props} className="relative inline-block">
        <Toggle id="example-toggle">{title}</Toggle>
        <Menu role={role} />
      </div>
    )}
  </Dropdown>
);

const ButtonToolbar = styled("div")`
  & > * + * {
    margin-left: 12px;
  }
`;

const [show, setShow] = useState(false);

<ButtonToolbar className="dropdown-example">
  <DropdownButton
    show={show}
    onToggle={(nextShow) => setShow(nextShow)}
    title={`${show ? "Close" : "Open"} Dropdown`}
  />
  <DropdownButton alignEnd title="Align right" />

  <DropdownButton drop="up" title="Drop up" />
  <DropdownButton role="menu" title="Role 'menu'" />
</ButtonToolbar>;

const MenuContainer = styled("div")`
  display: ${(p) => (p.show ? "flex" : "none")};
  min-width: 150px;
  position: absolute;
  z-index: 1000;
  flex-direction: column;
  border: 1px solid #e5e5e5;
  background-color: white;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
`;
const Menu = ({ role }) => {
  const { show, onClose, props } = useDropdownMenu({
    flip: true,
    offset: [0, 8],
  });
  return (
    <MenuContainer {...props} role={role} show={show}>
      <button
        type="button"
        onClick={onClose}
        className="text-left hover:bg-brand-100 px-6 py-2"
      >
        Item 1
      </button>
      <button
        type="button"
        onClick={onClose}
        className="text-left hover:bg-brand-100 px-6 py-2"
      >
        Item 2
      </button>
    </MenuContainer>
  );
};
const Toggle = ({ id, children }) => {
  const [props, { show, toggle }] = useDropdownToggle();
  return (
    <button
      type="button"
      className="btn"
      id={id}
      {...props}
      onClick={toggle}
    >
      {children}
    </button>
  );
};
const DropdownButton = ({
  show,
  onToggle,
  drop,
  alignEnd,
  title,
  role,
}) => (
  <Dropdown
    show={show}
    onToggle={onToggle}
    drop={drop}
    alignEnd={alignEnd}
    itemSelector="button:not(:disabled)"
  >
    {({ props }) => (
      <div {...props} className="relative inline-block">
        <Toggle id="example-toggle">{title}</Toggle>
        <Menu role={role} />
      </div>
    )}
  </Dropdown>
);
const ButtonToolbar = styled("div")`
  & > * + * {
    margin-left: 12px;
  }
`;
const [show, setShow] = useState(false);
<ButtonToolbar className="dropdown-example">
  <DropdownButton
    show={show}
    onToggle={(nextShow) => setShow(nextShow)}
    title={`${show ? "Close" : "Open"} Dropdown`}
  />
  <DropdownButton alignEnd title="Align right" />
  <DropdownButton drop="up" title="Drop up" />
  <DropdownButton role="menu" title="Role 'menu'" />
</ButtonToolbar>;

import Dropdown from 'react-overlays/Dropdown'

alignEnd

Align the menu to the 'end' side of the placement side of the Dropdown toggle. The default placement is top-start or bottom-start.

type:boolean

childrenrequired

A render prop that returns the root dropdown element. The props argument should spread through to an element containing both the menu and toggle in order to handle keyboard events for focus management.

type:{Function ({ props: { onKeyDown: (SyntheticEvent) => void, }, }) => React.Element}

defaultShow

Sets the initial show position of the Dropdown.

type:boolean

drop

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

type:DropDirection

focusFirstItemOnShow

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.

type:falsetrue'keyboard'

itemSelector

A css slector string that will return focusable menu items. Selectors should be relative to the menu component: e.g. > li:not('.disabled')

type:string

default:'* > *'

onTogglerequired

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,
): void

type:(nextShow: boolean, event: ReactSyntheticEvent) => void

show

Whether or not the Dropdown is visible.

type:boolean

Dropdown

#API

#alignEnd

#childrenrequired

#defaultShow

#drop

#focusFirstItemOnShow

#itemSelector

#onTogglerequired

#show

API

alignEnd

childrenrequired

defaultShow

drop

focusFirstItemOnShow

itemSelector

onTogglerequired

show