Skip to main content
‌
‌

Menu

Interactive menu with items made easy

Quick nav

Features

  • Keyboard accessible
  • Reusable
  • Checkable items
  • Themes ready

Links

View source Report an issue ARIA design

Anatomy

import { Menu } from "@wonderflow/react-components";


export default () => {
  return (

    <Menu>

      <Menu.Item>Item</Menu.Item>

      <Menu.ItemCheckbox>Checkable item</Menu.ItemCheckbox>

      <Menu.Item>Item</Menu.Item>

    </Menu>

  );
};

tsx

API Reference

Menu

Property
Type
Default
maxHeight
string

Menu.Item

Property
Type
Default
icon
enum
value*
string
iconPosition
enum
left
dimension
enum
regular
onClick
function
description
ReactNode
disabled
boolean
false
padding
boolean
true
autoFocus
boolean
decoration
ReactNode
as
enum
button

Menu.ItemCheckbox

The Menu.ItemCheckbox extends all the Menu.Item properties and adds the following ones:

Property
Type
Default
checked
boolean

Accessibility

Keyboard interactions

tab

Move focus on the next focusable element inside the menu.

enter

Trigger the menu item action.

ArrowUp

Move the focus on the previous menu item

ArrowDown

Move the focus on the next menu item