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β
Slotsβ
defaultβ
fixedItemsβ
headerβ
Eventsβ
selection-changeβ
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.