Nav Overview
The Nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.
WaveMaker Nav widget is used in the implementation of the default leftnav and rightnav when the page layout is chosen to include the same. Within an app, it can be used in two ways.
Binding Dataset
Bind dataset for the nav elements using the Value property and setting the Action Items by mapping the properties from the value dataset to the action properties such as label, icon, link, badge value, sub actions.
Add Widgets
Provides widget to be added to the nav panels such as Anchor, Menu, Popover, Button. Depending upon the widgets added to the nav various properties can be set:
- Anchor: can have hyperlink to specify the destination link, target where the linked document should be opened
- Menu: can specify the layout, position and value-action combination. Click here for more on menu usage
- Popover: can set the content source and content for further action. Click here for Popover usage.
- Button: on click event can be set for page navigation
Nav Types & Layouts
From the Properties panel, you can set the Nav Types and Layout
Properties
Action IconClass for the icon. Choose from the options available based upon the structure of the Dataset Value.
| Property | Description |
|---|---|
| Name | The name is a unique identifier for Nav widget. |
| Type | Defines the display style, choose between navbar, pills (default) or tabs. |
| Add Widget | This action button allows you to add widgets within the Nav. The available options are Anchor, Menu, Popover, or Button. |
| Layout | |
| Width | The width of your widget can be specified in px or % (i.e 50px, 75%). |
| Height | The height of your widget can be specified in px or % (i.e 50px, 75%). |
| Layout | This property controls how contained widgets are displayed within this widget container. It can be stacked or justified |
| Dataset | |
| Value | Set this property to a variable to populate the list of values to display. It can be bound to any Variable |
| Order by | This allows for multiple selections for ordering the display of rows based on fields in asc or desc order - up arrow for asc and down arrow for desc. The fields are auto-populated based upon the structure of Dataset Value |
| Actions | |
| Action Label | Label for menu items. Choose from the options available based upon the structure of the Dataset Value. |
| Action Icon | Class for the icon for menu items. Example- 'fa fa-ban' or 'glyphicon glyphicon-cloud' |
| Action Link | Link for the anchor widget. Choose from the options available based upon the structure of the Dataset Value. |
| Action Task | Task for nav items. This is the action that will be triggered when the user clicks on the Nav Item. It can be a script like: Variables.v1.invoke() Execution order on click of Node: 1. If provided onSelect will be executed first. 2. If provided Action will be executed next. 3. If provided Action link will be executed last. |
| User Role | Role for menu items generated dynamically. You can assign a property to 'userrole' which contains comma separated user roles. Each item will be evaluated with given 'userrole' for that item to that of the logged in user roles, from security. If any of the user roles bound to 'userrole' property matches then that menu item will be shown else will be hidden. |
| Item Badge | Badge value to be displayed. Choose from the options available based upon the structure of the Dataset Value. |
| Sub Actions | When a menu widget is required the sub items can be mentioned in the children. Choose from the options available based upon the structure of the Dataset Value. |
| Behavior | |
| Show | Showing determines whether or not a component is visible. It is a bindable property. |
| Load on Demand (visible only when show property is bound to a variable) | When this property is set and show property is bound, the initialization of the widget will be deferred till the widget becomes visible. This behavior improves the load time. Use this feature with caution, as it has a downside (as we will not be able to interact with the widget through script until the widget is initialized). When show property is not bound the widget will be initialized immediately. |
| Auto Close | This property defines the behavior of menu closing, it can be: - outsideClick - close the menu when clicked outside of the menu, - always - when a menu item is selected or on click outside menu, or - disabled - do not close once opened. |
| Format | |
| Horizontal Align | Set text alignment horizontally. |
Event
Each anchor widget events are available for adding functionality to this layout. For more on Anchor widget see here.
Use Cases
Using Navigation
Working with Nav Bar
Creating a Dropdown Menu
Dynamic Menu based on the User Role