Menu

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: `
{your content}
`. 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.
onEscape A {Function} called when a user presses escape in the input.
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.

results matching ""

    No results matching ""