@ui5/webcomponents-react
Version:
React Wrapper for UI5 Web Components and additional components
39 lines (38 loc) • 2.14 kB
JavaScript
'use client';
import { withWebComponent } from '../../internal/withWebComponent.js';
/**
* The `SideNavigation` is used as a standard menu in applications.
* It consists of three containers: header (top-aligned), main navigation section (top-aligned) and the secondary section (bottom-aligned).
*
* - The header is meant for displaying user related information - profile data, avatar, etc.
* - The main navigation section is related to the user’s current work context
* - The secondary section is mostly used to link additional information that may be of interest (legal information, developer communities, external help, contact information and so on).
*
* ### Usage
*
* Use the available `SideNavigationGroup`, `SideNavigationItem`
* and `SideNavigationSubItem` components to build your menu.
* The items can consist of text only or an icon with text. The use or non-use of icons must be consistent for all items on one level.
* You must not combine entries with and without icons on the same level. We strongly recommend that you do not use icons on the second level.
*
* ### Keyboard Handling
*
* ### Fast Navigation
* This component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].
* In order to use this functionality, you need to import the following module:
* `import "@ui5/webcomponents-base/dist/features/F6Navigation.js"`
*
*
*
*
* `import "@ui5/webcomponents-fiori/dist/SideNavigationGroup.js";` (for `SideNavigationGroup`)
*
* `import "@ui5/webcomponents-fiori/dist/SideNavigationItem.js";` (for `SideNavigationItem`)
*
* `import "@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js";` (for `SideNavigationSubItem`)
*
* __Note__: This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/)
*/
const SideNavigation = withWebComponent('ui5-side-navigation', [], ['collapsed'], ['fixedItems', 'header'], ['selection-change']);
SideNavigation.displayName = 'SideNavigation';
export { SideNavigation };