useDropdownMenu

Create custom dropdown menus without the extra component with useDropdownMenu. Make sure to spread through the returned props. If creating a navigation menu (as described here), make sure to provide the role='menu' prop to automatically get correct keyboard focus handling.

import { useDropdownMenu } from "react-overlays";
const MenuItem = ({ children, href }) => (
  <li>
    <a
      href={href}
      className="px-3 py-2 block hover:bg-gray-200"
    >
      {children}
    </a>
  </li>
);
const NavMenu = () => {
  const { props } = useDropdownMenu();
  return (
    <ul
      role="menu"
      className="bg-white border rounded inline-block w-32 shadow"
      {...props}
    >
      <MenuItem href="#home">Home</MenuItem>
      <MenuItem href="#docs">Docs</MenuItem>
      <MenuItem href="#about">About</MenuItem>
    </ul>
  );
};
<NavMenu />;

#API

• #

  useDropdownMenu(options: object) => void

  Parameters

  • optionsobject
    • flipboolean

      Automatically adjust the menu drop position based on viewport edge detection

    • offset[number, number]

      Define an offset distance between the Menu and the Toggle

    • showboolean

      Display the menu manually, ignored in the context of a Dropdown

    • usePopperboolean

      opt in/out of using PopperJS to position menus. When disabled you must position it yourself.

    • rootCloseEventstring

      The pointer event to listen for when determining "clicks outside" the menu for triggering a close.

    • popperConfigobject

      Options passed to the usePopper hook.