library

React Accessible Menu

Mon Oct 11 2021
Accessible keyboard-friendly interactive list/menu component

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.

Profile Image
Lukas Bach
Software engineer at GoTo