TableRowActionNavigation

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

info

The following entity is available under an experimental flag and its API and behavior are subject to change.

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

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

No events available for this component.

Methods

No methods available for this component.

CSS Parts

No CSS parts available for this component.

Basic Sample

By default, the ui5-table-row-action-navigation component displays a dedicated navigation icon to indicate that a row is navigable. The icon 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.

If the interactive property is set to true, the navigation icon appears as a button, and clicking it triggers the table’s row-action-click event.

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