SideNavigation

<ui5-side-navigation> | Since 1.0.0-rc.8

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 ui5-side-navigation-group, ui5-side-navigation-item and ui5-side-navigation-sub-item 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.

The ui5-side-navigation component is intended for use within an ui5-navigation-layout component. While it can function independently, it is recommended to use it with the ui5-navigation-layout for optimal user experience.

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"

ES6 Module Import

import "@ui5/webcomponents-fiori/dist/SideNavigation.js"

import "@ui5/webcomponents-fiori/dist/SideNavigationGroup.js"; (for ui5-side-navigation-group)

import "@ui5/webcomponents-fiori/dist/SideNavigationItem.js"; (for ui5-side-navigation-item)

import "@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js"; (for ui5-side-navigation-sub-item)

Basic Sample

Properties

collapsed

Description	Defines whether the ui5-side-navigation is expanded or collapsed.
Type	boolean
Default	false

Slots

default

Description	Defines the main items of the component.
Type	Array<SideNavigationGroup | SideNavigationItem>

fixedItems

Description	Defines the fixed items at the bottom of the component. Note: In order to achieve the best user experience, it is recommended that you keep the fixed items "flat" (do not pass sub-items)
Type	Array<SideNavigationGroup | SideNavigationItem>

header

Description	Defines the header of the ui5-side-navigation. Note: The header is displayed when the component is expanded - the property collapsed is false;
Type	Array<HTMLElement>
Since	1.0.0-rc.11

Events

selection-change

Description	Fired when the selection has changed via user interaction
Type	CustomEvent<SideNavigationSelectionChangeEventDetail>
Parameters	item: SideNavigationSelectableItemBase the clicked item.
Bubbles	Yes
Cancelable	Yes - via preventDefault()

Methods

No methods available for this component.

CSS Parts

No CSS parts available for this component.