Skip to main content
Version: v11.7.1

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:

  1. Anchor: can have hyperlink to specify the destination link, target where the linked document should be opened
  2. Menu: can specify the layout, position and value-action combination. Click here for more on menu usage
  3. Popover: can set the content source and content for further action. Click here for Popover usage.
  4. Button: on click event can be set for page navigation

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.

PropertyDescription
NameThe name is a unique identifier for Nav widget.
TypeDefines the display style, choose between navbarpills (default) or tabs.
Add WidgetThis action button allows you to add widgets within the Nav. The available options are Anchor, Menu, Popover, or Button.
Layout
WidthThe width of your widget can be specified in px or % (i.e 50px, 75%).
HeightThe height of your widget can be specified in px or % (i.e 50px, 75%).
LayoutThis property controls how contained widgets are displayed within this widget container. It can be stacked or justified
Dataset
ValueSet this property to a variable to populate the list of values to display. It can be bound to any Variable
Order byThis 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 LabelLabel for menu items. Choose from the options available based upon the structure of the Dataset Value.
Action IconClass for the icon for menu items. Example- 'fa fa-ban' or 'glyphicon glyphicon-cloud'
Action LinkLink for the anchor widget. Choose from the options available based upon the structure of the Dataset Value.
Action TaskTask 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 RoleRole 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 BadgeBadge value to be displayed. Choose from the options available based upon the structure of the Dataset Value.
Sub ActionsWhen 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
ShowShowing 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 CloseThis 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 AlignSet 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