useMenu

The problem

You need an menu experience in your application and you want it to be accessible. You also want it to be simple and flexible to account for your use cases.

This solution

useMenu is a React hook that provides all the logic to create a WAI-ARIA menu component.

Installation

npm install use-menu-hook --save

// or
yarn add use-menu-hook

This packages depends on react, Please make sure you installed react as well.

Usage

Try it in the browser

import useMenu from "use-menu-hook";

function MenuButton() {
  const { getMenuButtonProps, getMenuItemProps, getMenuProps } = useMenu();

  return (
    <div className="App">
      <button {...getMenuButtonProps({ id: "colors" })}>Colors</button>
      <ul {...getMenuProps({ labelledBy: "colors" })}>
        <li {...getMenuItemProps({ id: "red" })}>Red</li>
        <li {...getMenuItemProps({ id: "green" })}>Green</li>
        <li {...getMenuItemProps({ id: "blue" })}>Blue</li>
      </ul>
    </div>
  );
}

More Examples

• Menu button
• With context
• With react-popper

Inspiration

• Navigation Menu Button Example
• Navigation Menubar Example
• useSelect