Links

Navigation

​
The Alert is also available as an Experience Cloud Component.

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 items
  • Title: to customize title styling if present
  • Label: to customize styling for label items
  • Overflow Button: to customize styling for the overflow buttons if a lot of items are present

Specifications

Attributes
Events
Styling Hooks
Name
Type
Description
Title
String
Set the title for the Navigation component
Title Icon Name
String
The name of the icon displayed on the left of the title
Active Navigation Item Value
String
The value of the navigation item to open by default.
Shaded
Boolean
Changes the appearance of the navigation items giving them a shaded background.
Orientation
Boolean
Set the navigation of the component
Item Label
String
The Text label of the item
Item Value
String
The item value (used for attributes)
Item Tag
String
To add a tag next to the item
Item Tooltip
String
Displays tooltip text when the mouse moves over the element.
Item Icon Name
String
To specify an icon next to the item.
Name
Description
active
The event that is fired when a menu item is selected.

Border

Name
Description
Size
Define a size for the border around the component.
Style
Define a style for the border around the component.
Color
Define a color for the border around the component.
Radius
Define a radius value for the border around the component.

Size

Name
Description
Width
Set a width for the navigation component.
Height
Set a height for the navigation component.

Background

Name
Description
Color
Define a background color for the component.
Color Active
Define a background color when an item is active.
Color Hover
Define a background color when the mouse hovers an item.
Name
Description
Size
Define a size for the navigation border
Size Active
Define the size of the navigation border when active
Size Hover
Define the size of the navigation border when the mouse hover
Color
Define a default color for the navigation border
Color Active
Define a color when the navigation border is active
Color Hover
Define a color for the navigation border when the mouse hover

Item

Name
Description
Width
Set a width for items
Min Width
Set a min width for items
Max Width
Set a max width for items
Height
Set a height for items
Border Size
Set a border size for items
Border Color
Set a border color for items
Border Size Active
Set a border size for an active item
Border Color Active
Set a border color when an item is active

Sub Items menu

Name
Description
Icon Color
Set an icon color for sub items menu
Icon Color Active
Set an icon color when a sub-item menu is active
Width
Set a width for sub items
Min Width
Set a min width for sub items
Max Width
Set a max width for sub items

Title

Name
Description
Text Color
Set a text color for the title
Font Size
Set a font size for the title
Font Family
Set a font family for the title
Font Weight
Set a font weight for the title
Text Shadow
Set a text shadow value for the title

Label

Name
Description
Text Color
Set a text color for labels
Text Color Active
Set a text color when a label is active
Text Color Hover
Set a text color when the mouse hover
Font Size
Set a label font size
Font Size Active
Set a font size when a label is active
Font Size Hover
Set a label font size when mouse hover
Font Family
Set a font family for labels
Font Family Active
Set a font family when a label is active
Font Family Hover
Set a font family for a label when the mouse hover.
Font Weight
Set a font weight for a label
Font Weight Active
Set a font weight when a label is active
Font Weight Hover
Set a font weight on labels when the mouse hover
Text Shadow
Set a text shadow on a label
Text Shadow Active
Set a text shadow on an active label
Text Shadow Hover
Set a text-shadow on a label when the mouse hover

Overflow Button

Name
Description
Text Color
Define text color on overflow button
Icon Color
Define an icon color on overflow button
Last modified 3mo ago