UI5 Web Components
Search

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>

<style>
	ui5-shellbar::part(root) {
		padding-left: .5rem;
	}
</style>

Overview

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-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 or Ctrl + Alt(Option) + Down / 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/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
HTMLElement [0..n]
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
HTMLElement [0..n]
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)
header
HTMLElement [0..n]
Defines the header of the ui5-side-navigation.

Note: The header is displayed when the component is expanded - the property collapsed is false;

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: sap.ui.webc.fiori.ISideNavigationItem|sap.ui.webc.fiori.ISideNavigationSubItem
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.
wholeItemToggleable
whole-item-toggleable
boolean
false
Defines whether pressing the whole item or only pressing the icon will show/hide the items's sub items(if present). If set to true, pressing the whole item will toggle the sub items, and it won't fire the click event. By default, only pressing the arrow icon will toggle the sub items & the click event will be fired if the item is pressed outside of the icon.
since v1.0.0-rc.11

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
sap.ui.webc.fiori.ISideNavigationSubItem [0..n]
If you wish to nest menus, you can pass inner menu items to the default slot.

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
click
Fired when the component is activated either with a click/tap or by using the Enter or Space key.

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.

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
click
Fired when the component is activated either with a click/tap or by using the Enter or Space key.
Theme: Morning Horizon (Light) Evening Horizon (Dark) Horizon High Contrast Black Horizon High Contrast White Quartz Light Quartz Dark Quartz High Contrast Black Quartz High Contrast White
Content Density: Cozy Compact
Text Direction: LTR RTL
Apply Cancel