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
| Description | Defines if the item is expanded |
| Type | boolean |
| Default | false |
icon
| Description | Defines the icon of the item.
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 |
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 |
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 |
design
| Description | Item design.
Note: Items with "Action" design must not have sub-items. |
| Type | "Default" | "Action" |
| Default | "Default" |
| Since | 2.7.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 |
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 |
text
| Description | Defines the text of the item. |
| Type | string | undefined |
| Default | undefined |
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 |
| 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 |
Slots
default
| Description | Defines nested items by passing ui5-side-navigation-sub-item to the default slot. |
| Type | Array<SideNavigationSubItem> |
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.