Navigation
Overview
The Avonni Navigation flow screen component is designed to simplify navigation between different screens. It enables users to construct horizontal and vertical navigational systems seamlessly, making it essential for a structured and intuitive user interface. With Avonni Navigation, the process of screen navigation is simplified and significantly more manageable.
Changing the properties
Horizontal Orientation
Vertical Orientation
Adding Items
Navigation items can be added from the Data Source section. Items can be added manually or generated dynamically from a variable or a picklist value.
Adding sub-items
Adding sub-items to an item in the Avonvoi Navigation flow screen component is a straightforward process to create nested layers within your navigational systems. It enhances organization and intuitive navigation, making complex interfaces more user-friendly.
To add a sub-item, navigate to the Data Source section, select an item, and click on the "Add Item" in the sub-items section.
Remember, like with main items, ensure that your sub-items are appropriately named and logically arranged to maintain a well-structured and intuitive interface.
Adding Interactions
Interactions define what will happen when users interact with the Navigation component. You can find a list of interactions available here.
Here are the available interactions for the Navigation component:
On
select
: The event that is fired when a menu item is selected.
Styling the navigation
From the Style panel, you can customize styling attributes for the Navigation component:
Border
: to customize the border around the component.Size
: to customize the width and height of the component.Background
: to customize the background colors for the component.Navigation Border
: to customize the navigation border styling.Item
: to customize styling settings for items.Sub Items Menu
: to customize styling settings for sub-menu itemsTitle
: to customize title styling if presentLabel
: to customize styling for label itemsOverflow Button
: to customize styling for the overflow buttons if a lot of items are present
Specifications
Name | Type | Description |
---|---|---|
| String | Set the title for the Navigation component |
| String | The name of the icon displayed on the left of the title |
| String | The value of the navigation item to open by default. |
| Boolean | Changes the appearance of the navigation items giving them a shaded background. |
| Boolean | Set the navigation of the component |
| String | The Text label of the item |
| String | The item value (used for attributes) |
| String | To add a tag next to the item |
| String | Displays tooltip text when the mouse moves over the element. |
| String | To specify an icon next to the item. |
Last updated