Options
All
  • Public
  • Public/Protected
  • All
Menu

react-accessible-menu

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.

Generated using TypeDoc