Skip to main content

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​

DescriptionDefines whether the ui5-side-navigation is expanded or collapsed.
Typeboolean
Defaultfalse

Slots​

default​

DescriptionDefines 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.
TypeArray<SideNavigationItemBase>

fixedItems​

DescriptionDefines 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)
TypeArray<SideNavigationItemBase>
DescriptionDefines the header of the ui5-side-navigation.
Note: The header is displayed when the component is expanded - the property collapsed is false;
TypeArray<HTMLElement>
Since1.0.0-rc.11

Events​

selection-change​

DescriptionFired when the selection has changed via user interaction
TypeCustomEvent<SideNavigationSelectionChangeEventDetail>
Parametersitem: 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.