https://github.com/lukasbach/react-accessible-menu

Accessible keyboard-friendly interactive list/menu component
https://github.com/lukasbach/react-accessible-menu

a11y accessible component hotkey hotkeys interactive keyboard library list menu menuitem react tiny typed typings ui

Last synced: 3 months ago
JSON representation

Accessible keyboard-friendly interactive list/menu component

• Host: GitHub
• URL: https://github.com/lukasbach/react-accessible-menu
• Owner: lukasbach
• Created: 2021-10-11T21:35:47.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2022-06-19T22:09:52.000Z (over 2 years ago)
• Last Synced: 2024-10-02T15:37:41.730Z (4 months ago)
• Topics: a11y, accessible, component, hotkey, hotkeys, interactive, keyboard, library, list, menu, menuitem, react, tiny, typed, typings, ui
• Language: TypeScript
• Homepage: https://lukasbach.github.io/react-accessible-menu/storybook/
• Size: 1.36 MB
• Stars: 7
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
# react-accessible-menu

![](https://badgen.net/npm/v/react-accessible-menu)

![](https://badgen.net/npm/types/react-accessible-menu)

[![](https://badgen.net/bundlephobia/dependency-count/react-complex-tree)](https://bundlephobia.com/package/react-accessible-menu)

[![](https://badgen.net/bundlephobia/minzip/react-complex-tree)](https://bundlephobia.com/package/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](https://lukasbach.github.io/react-accessible-menu/storybook/?path=/docs/accessible-menu--complex-nesting), [Demo 2](https://lukasbach.github.io/react-accessible-menu/storybook/?path=/docs/accessible-menu--interrupted-list))

- Tiny in size and with minimal performance overhead

- Trivially virtualizable ([Demo](https://lukasbach.github.io/react-accessible-menu/storybook/?path=/docs/accessible-menu--virtualized-example))

- Provides both a component-based and hook-based interface ([Demo](https://lukasbach.github.io/react-accessible-menu/storybook/?path=/docs/accessible-menu--using-hooks))

- Typed with Typescript

- Supports dynamic updates to list ([Demo](https://lukasbach.github.io/react-accessible-menu/storybook/?path=/docs/accessible-menu--dynamic-changes-to-list))

## 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

```typescript jsx

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

 (

    


      

        renderItem={({ props, ref,  }) => (

          

            Apple

          

        )}

      />

      

        renderItem={({ props, ref,  }) => (

          

            Orange

          

        )}

      />

    

  )}

/>

```


You can find more examples in the [Project's Storybook](https://github.com/lukasbach/react-accessible-menu/blob/main/src/Menu.stories.tsx).