Side Navigation

v1.0.0-rc.8
@ui5/webcomponents
<ui5-side-navigation>

Side Navigation in Application

<ui5-shellbar
primary-title="UI5 Web Components"
secondary-title="The Best Run SAP"
show-co-pilot
>
	<ui5-button icon="menu" slot="startButton" id="startButton"></ui5-button>
</ui5-shellbar>

<ui5-side-navigation>
	<ui5-side-navigation-item text="Home" icon="home"></ui5-side-navigation-item>
	<ui5-side-navigation-item text="People" expanded icon="group">
		<ui5-side-navigation-sub-item text="From My Team"></ui5-side-navigation-sub-item>
		<ui5-side-navigation-sub-item text="From Other Teams"></ui5-side-navigation-sub-item>
	</ui5-side-navigation-item>
	<ui5-side-navigation-item text="Locations" icon="locate-me" selected></ui5-side-navigation-item>
	<ui5-side-navigation-item text="Events" icon="calendar">
		<ui5-side-navigation-sub-item text="Local"></ui5-side-navigation-sub-item>
		<ui5-side-navigation-sub-item text="Others"></ui5-side-navigation-sub-item>
	</ui5-side-navigation-item>

	<ui5-side-navigation-item slot="fixedItems" text="Useful Links" icon="chain-link"></ui5-side-navigation-item>
	<ui5-side-navigation-item slot="fixedItems" text="History" icon="history"></ui5-side-navigation-item>
</ui5-side-navigation>

<script>
	const sideNavigation = document.querySelector("ui5-side-navigation");
	document.querySelector("#startButton").addEventListener("click", event => sideNavigation.collapsed = !sideNavigation.collapsed);
</script>
	

Overview

The SideNavigation is used as a standard menu in applications. It consists of two containers: the main navigation section (top-aligned) and the secondary section (bottom-aligned). Usually the main navigation section is related to the user’s current work context, whereas 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-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.

ES6 Module Import

import @ui5/webcomponents-fiori/dist/SideNavigation.js";
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)

Properties/Attributes

You can use both properties and attributes with the same effect. The name of each attribute is listed below the name of the property, if different.

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

Slots

This Element provides slot(s). This means it can display its child nodes.
Unless targeting the default slot, use the slot attribute to define the destination slot for each child.
Text, along with HTML Elements with no slot attribute, goes the the default slot.

Slot
Type
Description
default
undefined
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.
fixedItems
undefined
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)

Events

This Web Component fires semantic events upon user interaction. You can bind to these events with the standard DOM APIs, such as addEventListener.

Name
Description
selection-change
Fired when the selection has changed via user interaction
item
type: HTMLElement
description: the clicked item.

SideNavigationItem

Overview

The ui5-side-navigation-item is used within ui5-side-navigation only. Via the ui5-side-navigation-item you control the content of the SideNavigation.

ES6 Module Import

import @ui5/webcomponents-fiori/dist/SideNavigationItem.js";

Properties/Attributes

You can use both properties and attributes with the same effect. The name of each attribute is listed below the name of the property, if different.

Name
Type
Default Value
Description
expanded
boolean
false
Defines if the item is expanded
icon
string
""
Defines the icon of the item.

The SAP-icons font provides numerous options.
See all the available icons in the Icon Explorer.
selected
boolean
false
Defines whether the subitem is selected
text
string
""
Defines the text of the item.

Slots

This Element provides slot(s). This means it can display its child nodes.
Unless targeting the default slot, use the slot attribute to define the destination slot for each child.
Text, along with HTML Elements with no slot attribute, goes the the default slot.

Slot
Type
Description
default
HTMLElement [0..n]
If you wish to nest menus, you can pass inner menu items to the default slot.

SideNavigationSubItem

Overview

The ui5-side-navigation-sub-item is intended to be used inside a ui5-side-navigation-item only.

ES6 Module Import

import @ui5/webcomponents-fiori/dist/SideNavigationSubItem.js";

Properties/Attributes

You can use both properties and attributes with the same effect. The name of each attribute is listed below the name of the property, if different.

Name
Type
Default Value
Description
icon
string
""
Defines the icon of the item.

The SAP-icons font provides numerous options.
See all the available icons in the Icon Explorer.
selected
boolean
false
Defines whether the subitem is selected.
text
string
""
Defines the text of the item.
Theme: Quartz Light Quartz Dark Quartz High Contrast Black Quartz High Contrast White Belize High Contrast Black High Contrast White
Content Density: Cozy Compact
Text Direction: LTR RTL
Apply Cancel