The Nav Bar Control is a navigational tool that provides users with a set of menu items. Each menu item in the control is equipped with trigger action functionality, allowing users to perform specific actions such as executing queries or navigating to other pages or screens.
The control is designed to be mobile responsive, featuring a burger menu icon. When the page layout switches to a mobile view, the entire navbar transforms into a block format with the burger menu item. Upon clicking the burger menu, all the menu items are displayed for easy navigation.
Binding Data Options
Nav Bar control accepts array of nested objects in JSON format to display data. There are different ways in which you can bind data to the Nav Bar control.
Static Data Option
To display static options in the Nav Bar control, you can use the Bind Data option. The Bind Data option must be specified as an array of objects. For example:
"icon": "icons icon-home",
"icon": "icons icon-plus",
"label": "UI Builder",
"description": "Interface design",
"icon": "icons icon-grid",
- Simple Nav bar
- Icon Nav Bar
- Image Nav Bar
|Menu properties||Allows customization of menu items in the Nav Bar control, including coloring, styling, positioning, and font attributes.|
|Burger Menu Alignment||Fixes the position of the burger menu in mobile responsive view.|
|Open dropdown on||Sets the action (Hover or Click) on which the dropdown is visible.|
|Item Max height||Sets the maximum height of each dropdown menu.|
|Menu alignment||Aligns menu items within the Nav Bar control.|
|Selected Item||Sets the background and font color of the active menu item in the Nav Bar control or menu data with isActive set as true.|
|Dropdown color||Sets the background and font color of submenu items in the Nav Bar control or menu items under the options property.|
The outputs from the Nav Bar control, represented by the placeholder
|navbar||Represents the selected value from the Nav Bar control, indicating the user's chosen menu item.|
|value_select||Occurs when there is a change in the value of the respective control, typically triggered by selecting another option or inputting a new value.|