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. |
getSelectedItem()
Returns
| Return Values |
|---|
| Returns the currently selected item. |