Summary

React component for multi-section Menus with key binding

The Menu component allows you to display a list of items. Menu takes care of several important things, ensuring that your menu is consistent with the rest of the N1 application and offers a near-native experience:

Keyboard Interaction with the Up and Down arrow keys, Enter to select
Maintaining selection across content changes
Highlighted state

Menus are often, but not always, used in conjunction with Popover to display a floating "popup" menu. See template-picker.cjsx for an example.

The Menu also exposes "header" and "footer" regions you can fill with arbitrary components by providing the headerComponents and footerComponents props. These items are nested within .header-container. and .footer-container, and you can customize their appearance by providing CSS selectors scoped to your component's Menu instance:

.template-picker .menu .header-container {
  height: 100px;
}

Class Properties

propTypes

React props supported by Menu:

className

Optional

The String class name applied to the Menu

itemContent

A Function that returns a MenuItem, String, or React component for the given item. If you return a MenuItem, your item is injected into the list directly. If you return a string or React component, the result is placed within a MenuItem, resulting in the following DOM: <div className="item [selected]">{your content}</div>. To create dividers and other special menu items, return an instance of:

itemKey

A Function that returns a unique string key for the given item. Keys are important for efficient React rendering when items is changed, and a key function is required.

itemChecked

A Function that returns true if the given item should be shown with a checkmark. If you don't provide an implementation for itemChecked, no checkmarks are ever shown.

items

An Array of arbitrary objects the menu should display.

onSelect

A Function called with the selected item when the user clicks an item in the menu or confirms their selection with the Enter key.

defaultSelectedIndex

The index of the item first selected if there was no other previous index. Defaults to 0. Set to -1 if you want nothing selected.

Instance Methods

getSelectedItem()

Returns

Return Values
Returns the currently selected item.

Return Values

Returns the currently selected item.

setSelectedItem()

Set the currently selected item. Pass null to remove the selection

className	Optional The String class name applied to the Menu
itemContent	A Function that returns a MenuItem, String, or React component for the given `item`. If you return a MenuItem, your item is injected into the list directly. If you return a string or React component, the result is placed within a MenuItem, resulting in the following DOM: `<div className="item [selected]">{your content}</div>`. To create dividers and other special menu items, return an instance of:
itemKey	A Function that returns a unique string key for the given `item`. Keys are important for efficient React rendering when `items` is changed, and a key function is required.
itemChecked	A Function that returns true if the given item should be shown with a checkmark. If you don't provide an implementation for `itemChecked`, no checkmarks are ever shown.
items	An Array of arbitrary objects the menu should display.
onSelect	A Function called with the selected item when the user clicks an item in the menu or confirms their selection with the Enter key.
defaultSelectedIndex	The index of the item first selected if there was no other previous index. Defaults to 0. Set to -1 if you want nothing selected.