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.
useMenu
is a React hook that provides all the logic to create a WAI-ARIA menu component.
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.
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>
);
}