@ui5/webcomponents-react
Version:
React Wrapper for UI5 Web Components and additional components
36 lines (35 loc) • 1.5 kB
JavaScript
'use client';
import { withWebComponent } from '../../internal/withWebComponent.js';
/**
* `Menu` component represents a hierarchical menu structure.
*
* ### Structure
*
* The `Menu` can hold two types of entities:
*
* - `MenuItem` components
* - `MenuSeparator` - used to separate menu items with a line
*
* An arbitrary hierarchy structure can be represented by recursively nesting menu items.
*
* ### Keyboard Handling
*
* The `Menu` provides advanced keyboard handling.
* The user can use the following keyboard shortcuts in order to navigate trough the tree:
*
* - `Arrow Up` / `Arrow Down` - Navigates up and down the menu items that are currently visible.
* - `Arrow Right`, `Space` or `Enter` - Opens a sub-menu if there are menu items nested
* in the currently clicked menu item.
* - `Arrow Left` or `Escape` - Closes the currently opened sub-menu.
*
* Note: if the text ditrection is set to Right-to-left (RTL), `Arrow Right` and `Arrow Left` functionality is swapped.
*
*
*
* __Note__: This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/)
*
* @since [1.3.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v1.3.0) of __@ui5/webcomponents__.
*/
const Menu = withWebComponent('ui5-menu', ['headerText', 'loadingDelay', 'opener'], ['loading', 'open'], [], ['before-close', 'before-open', 'close', 'item-click', 'open']);
Menu.displayName = 'Menu';
export { Menu };