Skip to main content

SideNavigationItem

<ui5-side-navigation-item> | Since 1.0.0-rc.8

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

icon​

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

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 | undefined
Defaultundefined
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 | undefined
Defaultundefined
Since1.19.0

text​

DescriptionDefines the text of the item.
Typestring | undefined
Defaultundefined

disabled​

DescriptionDefines whether the component is disabled. A disabled component can't be pressed or focused, and it is not in the tab chain.
Typeboolean
Defaultfalse
Since1.19.0

tooltip​

DescriptionDefines the tooltip of the component.
A tooltip attribute should be provided, in order to represent meaning/function, when the component is collapsed(icon only is visualized).
Typestring | undefined
Defaultundefined
Since2.0.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
BubblesYes
CancelableNo

Methods​

No methods available for this component.

CSS Parts​

No CSS parts available for this component.