Skip to main content

SideNavigationItem

Represents a navigation action. It can provide sub items. The ui5-side-navigation-item is used within ui5-side-navigation or ui5-side-navigation-group only.

ES6 Module Import​

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

Properties​

expanded​

DescriptionDefines if the item is expanded
Typeboolean
Defaultfalse

wholeItemToggleable​

DescriptionDefines whether clicking the whole item or only pressing the icon will show/hide the sub items (if present). If set to true, clicking the whole item will toggle the sub items, and it won't fire the click event. By default, only clicking the arrow icon will toggle the sub items.
Typeboolean
Defaultfalse
Since1.0.0-rc.11

icon​

DescriptionDefines the icon of the item.
The SAP-icons font provides numerous options.
See all the available icons in the Icon Explorer.
Typestring
Default""

selected​

DescriptionDefines whether the item is selected
Typeboolean
Defaultfalse

href​

DescriptionDefines the link target URI. Supports standard hyperlink behavior. If a JavaScript action should be triggered, this should not be set, but instead an event handler for the click event should be registered.
Typestring
Default""
Since1.19.0

target​

DescriptionDefines the component target.
Notes:
- _self
- _top
- _blank
- _parent
- _search
This property must only be used when the href property is set.
Typestring
Default""
Since1.19.0

Slots​

default​

DescriptionDefines nested items by passing ui5-side-navigation-sub-item to the default slot.
TypeArray<SideNavigationSubItem>

Events​

click​

DescriptionFired when the component is activated either with a click/tap or by using the [Enter] or [Space] keys.
TypeCustomEvent

Methods​

No methods available for this component.

CSS Parts​

No CSS parts available for this component.