react-accessible-menu

Accessible keyboard-friendly interactive list/menu component

Demo - Docs

Features

• List items can be navigated with Arrow keys, Home, End and letter keys for quick navigation
• ARIA attributes and other accessibility attributes are automatically bound
• Unopinionated, allows completely customized render logic and arbitrary DOM nesting (Demo 1, Demo 2)
• Tiny in size and with minimal performance overhead
• Trivially virtualizable (Demo)
• Provides both a component-based and hook-based interface (Demo)
• Typed with Typescript
• Supports dynamic updates to list (Demo)

Installation

To start using react-accessible-menu, install it to your project as a dependency via

npm install react-accessible-menu

then import it and add your menu with

import { Menu, MenuItem } from 'react-accessible-menu';

<Menu
  renderMenu={({ props, ref }) => (
    <div className="list" ref={ref} {...props}>
      <MenuItem<HTMLButtonElement>
        renderItem={({ props, ref,  }) => (
          <button {...props} ref={ref} className="item">
            Apple
          </button>
        )}
      />
      <MenuItem<HTMLButtonElement>
        renderItem={({ props, ref,  }) => (
          <button {...props} ref={ref} className="item">
            Orange
          </button>
        )}
      />
    </div>
  )}
/>

You can find more examples in the Project's Storybook.