SideNavigationSubItem

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

Represents a single navigation action within ui5-side-navigation-item. 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

accessibilityAttributes

Description	Defines the additional accessibility attributes that will be applied to the component. The following fields are supported: - hasPopup: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button. Accepts the following string values: dialog, grid, listbox, menu or tree. Note: Do not use it on parent items, as it will be overridden if the item is in the overflow menu.
Type	SideNavigationItemAccessibilityAttributes
Default	{}
Since	2.7.0

accessibleName

Description	Defines the accessible ARIA name of the component.
Type	string | undefined
Default	undefined
Since	2.22.0

design

Description	Item design. Note: Items with "Action" design must not have sub-items.
Type	"Action" | "Default" (value descriptions in: SideNavigationItemDesign)
Default	"Default"
Since	2.7.0

disabled

Description	Defines whether the component is disabled. A disabled component can't be pressed or focused, and it is not in the tab chain.
Type	boolean
Default	false
Since	1.19.0

href

Description	Defines 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.
Type	string | undefined
Default	undefined
Since	1.19.0

icon

Description	Defines the icon of the item. Note: Icons on second-level (child) navigation items are not recommended according to the design specification. The SAP-icons font provides numerous options. See all the available icons in the Icon Explorer.
Type	string | undefined
Default	undefined

selected

Description	Defines whether the item is selected. Note: Items that have a set href and target set to _blank should not be selectable.
Type	boolean
Default	false

target

Description	Defines the component target. Possible values: - _self - _top - _blank - _parent - framename Note: Items that have a defined href and target attribute set to _blank should not be selectable.
Type	string | undefined
Default	undefined
Since	1.19.0

text

Description	Defines the text of the item.
Type	string | undefined
Default	undefined

tooltip

Description	Defines the tooltip of the component. A tooltip attribute should be provided, in order to represent meaning/function, when the component is collapsed ("icon only" design is visualized) or the item text is truncated.
Type	string | undefined
Default	undefined
Since	2.0.0

unselectable

Description	Indicates whether the navigation item is selectable. By default, all items are selectable unless specifically marked as unselectable. When a parent item is marked as unselectable, selecting it will only expand or collapse its sub-items. To improve user experience do not mix unselectable parent items with selectable parent items in a single side navigation. Guidelines: - Items with an assigned href and a target of _blank should be marked as unselectable. - Items that trigger actions (with design "Action") should be marked as unselectable.
Type	boolean
Default	false
Since	2.7.0

Slots

tag

Description	Defines the tag to be displayed. Note: Tags are visible when the NavigationList is in expanded mode, and hidden when collapsed, but they are visible in the overflow of the collapsed mode. Note: Only one ui5-tag is allowed. The tag should use design="Set2", hide-state-icon, and colorScheme values 5-10 to avoid confusion with semantic colors (1-4). Note: It is recommended to limit tag width to 64px (4rem). If tag text exceeds this, use shortened forms or abbreviations (e.g., "Experimental" → "Exp"). Important: The ui5-tag must never be interactive (i.e., active must not be set to true), as this would lead to nesting of interactive elements, which is not allowed.
Type	Array<HTMLElement>
Since	2.23.0

Events

click

Description	Fired when the component is activated either with a click/tap or by using the [Enter] or [Space] keys.
Type	CustomEvent<SideNavigationItemClickEventDetail>
Parameters	altKey: boolean Returns whether the "ALT" key was pressed when the event was triggered. ctrlKey: boolean Returns whether the "CTRL" key was pressed when the event was triggered. metaKey: boolean Returns whether the "META" key was pressed when the event was triggered. shiftKey: boolean Returns whether the "SHIFT" key was pressed when the event was triggered.
Bubbles	Yes
Cancelable	Yes - via preventDefault()

Methods

No methods available for this component.

CSS Parts

No CSS parts available for this component.

CSS Custom States

No CSS custom states available for this component.