Menu

<MenuItem>Item 1</MenuItem>
<MenuItem>Item 2</MenuItem>
<MenuItem>Item 3</MenuItem>

import * as React from "react";
import { Menu, MenuItem } from "spaceweb/menu";

export default () => {
  return (
    <Menu
      className="w-full border border-solid rounded-4 spr-border-01"
      estimateItemSize={5}
    >
      <MenuItem>Item 1</MenuItem>
      <MenuItem>Item 2</MenuItem>
      <MenuItem>Item 3</MenuItem>
    </Menu>
  );
}

Menus in Space Web provide an opportunity to nest various hierarchical navigation, features, or settings. Each menu item has an option to include an icon by default, but this can be removed. The menus themselves share the functionality and display of select menus.

When to use

• When you want to display a navigational list.
• When you want to display a list of actions.

Keybindings

• KeyDown / KeyUp navigates down / up in the menu list, highlighting items as needed.
• ArrowRight / Space Opens nested menu, if it exists
• ArrowLeft / Esc Closes nested menu and shifts focus to parent menu
• Enter / Space selects the currently highlighted item. If no item is highlighted, select the first item in the menu list.

Accessibility

• role="listbox" is provided to indicate ul as a composite widget.
• currently focused element of ul is refernced by aria-activedescendant attribute, which value is the id of selected li.

Examples

Menu will be focused(keyboard navigation will start working) as soon as it mounts. ListItem is selected if selected prop is true. Navigation will start with first selected item highlighted.

with disableNavigationOnMount set true, navigation will be off initially. It can be enabled by hovering over Menu, or when Menu is focused.

Setting virtual property for the Menu can enable virtualization. maxHeight and overflow must be provided to menu or its container

Check this example in list if overflow cannot be handled on Menu component.

maxHeight can be provided to Menu to make it scrollable.

Also, notice when triggerType is hover in StatefulPopover, focusWhenNavigationEnabled should be marked as false, otherwise as soon as user navigates anchor-button with keyboard, Button will be blurred when Menu mounts which will close popover-content(Menu) immediately.

Reducer can be used to alter the state of Menu. Here, reducer is used to set initially highlighted item.

Configurable action menu can be created using Menu.

To use Nested Menu, Wrap Menu with NestedMenu Context and pass getChildMenu prop to MenuItem.

Ref can be used to turn on/off navigation of the Menu.

API

Menu props

You can check the implementation of the component for more details.

Menu exports

You can import this module like so:

import {Menu} from 'spaceweb/menu'

It exports the following components or utility functions:

• Menu
• MenuItem
• NestedMenuProvider