SideNavigation

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.

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 ui5-side-navigation. Use the ui5-side-navigation-item component for the top-level items, and the ui5-side-navigation-sub-item component for second-level items, nested inside the items.
Type	Array<SideNavigationItemBase>

fixedItems

Description	Defines the fixed items at the bottom of the ui5-side-navigation. Use the ui5-side-navigation-item component for the fixed items, and optionally the ui5-side-navigation-sub-item component to provide second-level items inside them. 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<SideNavigationItemBase>

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.

Methods

No methods available for this component.

CSS Parts

No CSS parts available for this component.

More Samples

SideNavigation in Tool Layout

One of the patterns that the SideNavigation is used for is the so called Tool Layout. The sample demonstrates how one can achieve that layout. It consists of bar on the top (re-styled ShellBar in this case), menu on the side (SideNavigation) and main content area.