TableRowActionNavigation

<ui5-table-row-action-navigation> | Since 2.7.0

The ui5-table-row-action-navigation component defines a navigation action for table rows.

ES6 Module Import

import "@ui5/webcomponents/dist/TableRowActionNavigation.js";

Properties

interactive

Description	Defines the interactive state of the navigation action.
Type	boolean
Default	false
Deprecated	As of version 2.20.0, the navigation icon is deprecated. For better accessibility, the interactive mode which renders a button, must be used instead. To handle the action, attach a listener to the click event. If the navigation should be triggered when a row is pressed, set the row's interactive property and use the row-click event of the ui5-table. This property will be removed in the next major version.

invisible

Description	Defines the visibility of the row action. Note: Invisible row actions still take up space, allowing to hide the action while maintaining its position.
Type	boolean
Default	false

Slots

No slots available for this component.

Events

click

Description	Fired when a row action is clicked.
Type	CustomEvent
Since	2.9.0
Bubbles	Yes
Cancelable	No

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.

Basic Sample

By default, the ui5-table-row-action-navigation component displays a navigation button to indicate that a row is navigable. The button appears on the right side of the row and is the last item to move into the overflow menu. Therefore, if you want to show additional row actions along with the ui5-table-row-action-navigation, the row-action-count property of the ui5-table must be set to at least 2. This ensures that the ui5-table-row-action-navigation component never appears in the overflow menu.

The invisible property allows you to hide specific navigation actions. This property is useful for ensuring a consistent layout by displaying the navigation column.