Navigation item

Adds an item to the navigation menu or to a navigation list within a menu. A navigation item can be an internal page or an external link. Use this view in conjunction with the Navigation list view, and only within the Navigation menu view.

Note: The Navigation item, Navigation menu, and Navigation list views are available only in Application Designer in IBM® Cloud Pak for Business Automation.

Configuration properties

Under Configuration, set or modify the appearance and behavior properties for the view.

Screen size: A configuration property that has the Screen Sizes icon beside the property name can have different values for each screen size. If you do not set a value, the screen size inherits the value of the next larger screen size as its default value.

Theme definitions: Theme definitions specify the colors and styles for a view and determine its appearance. You can preview the look and feel of views in the theme editor. See Themes.

The appearance configuration properties for Navigation item are shown in the following table:

Table 1. Appearance configuration properties for Navigation item
Appearance configuration property	Description	Data type
Icon name	The icon name. To use icons for navigation items, see http://fontawesome.io/icons for a list of icon keywords. Note that the "fa-" prefix is optional.	`String`
Icon location	The location of the icon relative to the navigation item text. Left Right	`InputGroupButtonLoc`

The behavior configuration properties for Navigation item are shown in the following table:

Table 2. Behavior configuration properties for Navigation item
Behavior configuration property	Description	Data type
Prevent multiple clicks	Prevents the user from clicking the navigation item button more than once.	`Boolean`
Navigation menu item type	Specifies the type of navigation item, which can be either a link to an internal app page or an external link. Internal app link External URL	`NavigationItemType`
Associated page	The page identifier for the internal app link. If the navigation item represents a subflow UI, you can also add it here to highlight the navigation item.	`PageId[]`
Target URL	The valid URL of the external link that your navigation item points to.	`String`

Events

Set or modify the event handlers for the view in the Events properties. You can set events to be triggered programmatically or when a user interacts with the view. For information about how to define and code events, see User-defined events. Navigation item has the following types of event handlers:

On load: Activated when the page loads. For example:
```
console.log(“Navigation item loaded”);
```
On click: Activated when the navigation item is clicked. For example:
```
me.setText(“New navigation item label”);
```
On boundary event: Activated when the flow reaches a stay-on-page event after the boundary event is fired through the Link view. For example:
```
alert("Stay on Page status '" + status + "'")
```

Depending on the specific event, you can use JavaScript logic to modify the effects of the view. More information on using events with views is found in the topic User-defined events.

Methods

For detailed information on the available methods for Navigation item, see the Navigation item JavaScript API..

Additional resources

For information about how to create a coach or page, see Building coaches.
For information about standard properties (General, Configuration, Positioning, Visibility, and HTML Attributes), see View properties.