react-aria-menubutton demo

Some interactions you should try

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:

Great, now what do I do?

Go back to the repo

Icons in fancy demo from Ballicons by PixelBuddha.