v14.0.2‌
‌

navigation

Menu

Interactive menu with items made easy.

Features

Keyboard accessible
Reusable
Checkable items
Themes ready

Links

Open in playground Open in Storybook View source

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

PROPERTY

TYPE

DEFAULT

maxHeight

string

PROPERTY

TYPE

DEFAULT

value*

string

icon

enum

subtext

string

iconPosition

enum

left

dimension

enum

regular

onClick

function

description

ReactNode

disabled

boolean

false

padding

boolean

true

autoFocus

boolean

decoration

ReactNode

as

enum

button

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

PROPERTY

TYPE

DEFAULT

checked

boolean

Accessibility

Keyboard interactions

Name	Description
`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