react-aria-menubutton demo

Some interactions you should try

• Click the trigger to toggle the menu.
• With focus on the trigger, press Enter or Space to toggle the menu.
• With the menu closed and focus on the trigger, press ArrowDown to open the menu and move focus to the first menu item.
• With the menu opened, press ArrowDown or ArrowUp to cycle focus through the menu items.
• With the menu opened, press letter keys to navigate to items that start with whatever you type.
• With the menu opened, click a menu item to fire the handler.
• With the menu opened, use the keyboard to move focus to a menu item and press Enter or Space to fire the handler.
• With the menu opened and focus on either the trigger or a menu item, move focus outside of the menu — by clicking outside of it or pressing Tab — to close the menu.
• With the menu opened, press Escape to close the menu and return focus to the trigger.

All of these keyboard interactions follow the WAI-ARIA Design Pattern for Menu Button.

Possibilities for Fanciness

The provided components — the Button, the Menu, and the MenuItem — are just "smart" components to wrap whatever "dumb" components you want to be a part of the Menu Button pattern you're building — i.e. they just wrap your components to provide the keyboard functionality described above and some ARIA attributes.

This means that you can use any React element within the Button, Menu, or MenuItems. Which means that nothing can stop you.

To demonstrate, here's a fancier but equally ARIA-compliant and keyboard-friendly menu button:

Notice a few features:

• Complex markup within the button
• Complex markup within the menu items
• Navigating the menu with letters keys still makes sense
• Open-close animation (using React's CSSTransitionGroup)

Great, now what do I do?

Go back to the repo

Icons in fancy demo from Ballicons by PixelBuddha.