React Accessible Dropdown Menu Hook

npm bundle size Codecov coverage npm downloads npm release tested with Rugged license

This Hook handles all the accessibility logic when building a dropdown menu, dropdown button, etc., and leaves the design completely up to you. It also handles the logic for closing the menu when you click outside of it.

  • ♿️ Fully accessible
  • 📦 Written entirely in TypeScript
  • 🔬 Thoroughly tested
  • ⚡️ Zero dependencies
  • ✨ Tiny size

Quick start

Install with Yarn or npm:

yarn add react-accessible-dropdown-menu-hook
npm install react-accessible-dropdown-menu-hook

Import the Hook:

import useDropdownMenu from 'react-accessible-dropdown-menu-hook';

Call the Hook, telling it how many items your menu will have:

const { buttonProps, itemProps, isOpen } = useDropdownMenu(numberOfItems);

Spread the buttonProps onto a button:

<button {...buttonProps}>Example</button>

Create the menu with the role='menu' property and spread itemProps[x] onto each item:

<div className={isOpen ? 'visible' : ''} role='menu'>
    <a {...itemProps[0]} href='https://example.com'>Regular link</a>
    <a {...itemProps[1]} onClick={handleClick}>With click handler</a>
</div>

Done!

Documentation

Read the docs at: https://sparksuite.github.io/react-accessible-dropdown-menu-hook/docs/

Demo

See it in action: https://sparksuite.github.io/react-accessible-dropdown-menu-hook/demo/

Accessibility notes

Our team carefully studied and adhered to strict accessibility guidelines when designing this Hook. To learn more, see: https://sparksuite.github.io/react-accessible-dropdown-menu-hook/docs/design/accessibility.

Contributing

We love contributions! Contributing is easy; learn how.

React Accessible Dropdown Menu Hook

A simple Hook for creating fully accessible dropdown menus in React

React Accessible Dropdown Menu Hook Info

⭐ Stars 68
🔗 Homepage sparksuite.github.io
🔗 Source Code github.com
🕒 Last Update 11 days ago
🕒 Created 2 years ago
ğŸž Open Issues 8
➗ Star-Issue Ratio 9
ğŸ˜Ž Author sparksuite