WaveMaker Learn

WaveMaker Learn

  • Docs
  • Widgets
  • How-to
  • Releases
  • Login
  • Start free trial

›Navigation

Widgets & Prefabs Library

  • Widgets Library
  • Prefabs Overview

Cards

  • Overview
  • Creating a Card
  • Data Source
  • Templates
  • Configuration
  • Behavior Settings
  • Properties, Events & Methods
  • Use Cases

Data Table

  • Overview
  • Creating a Data Table
  • Data Source
  • Layouts
  • Configuration
  • Field Configuration
  • Row Expansion
  • Actions
  • Events & Methods
  • Use Cases

List

  • Overview
  • Creating a List
  • Data Source
  • Templates
  • Configuration
  • Behavior Settings
  • Properties, Events & Methods
  • Use Cases

Form

  • Overview
  • Creating a Form
  • Data Source
  • Layouts
  • Configuration
  • Fields Configuration
  • Events & Methods

Live Form

  • Overview
  • Creating a Live Form
  • Data Source
  • Layouts
  • Configuration
  • Fields Configuration
  • Actions
  • Events & Methods
  • Use Cases

Form Widgets

  • Button
  • Button Group
  • Text
  • Number
  • Textarea
  • Select
  • Chips
  • Currency
  • Radioset
  • Checkbox
  • CheckboxSet
  • Toggle
  • Switch
  • Date,  Time and  Datetime
  • Calendar
  • FileUpload
  • Color Picker
  • Slider
  • Rating Widget
  • Select Locale

Live Filter

  • Overview
  • Creating a Live Filter
  • Data Source
  • Layouts
  • Configuration
  • Field Configuration
  • Actions
  • Events & Methods
  • Use Cases

Container

  • Accordion
  • Container
  • Panel
  • Tabs
  • Tile
  • Wizard

Basic Widgets

  • Anchor
  • HTML
  • Icon
  • Iframe
  • Label
  • Message
  • Progress Bar
  • Richtext Editor
  • Search
  • Search - Basic Usage
  • Spinner
  • Tree
  • Media -  Audio,  Picture &  Video Widgets

Charts

  • Chart Widgets
  • Callback Event

Navigation

  • Breadcrumb
  • Creating a Breadcrumb
  • Dropdown Menu
  • Dropdown Menu - Basic Usage
  • Nav
  • Nav Bar
  • Popover
  • Popover - Basic Usage

Advanced Widgets

  • Carousel
  • Login
  • Marquee

Dialog Widgets

  • Modal Windows/ Dialogs
  • Alert Dialog
  • Confirm Dialog
  • IFrame Dialog
  • Design Dialog
  • Page Dialog
  • Login Dialog

Mobile & Device Widgets

  • Camera
  • Media List
  • Segmented Control
  • Barcode Scanner

Prefabs

  • Youtube
  • Googlemaps
  • QRCode
  • Box Viewer Prefab
  • OAuth

    • OAuth Prefabs
    • Box
    • Facebook
    • Google
    • Instagram
    • LinkedIn
Edit

Nav


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

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.

PropertyDescription
NameThe name is a unique identifier for Nav widget.
TypeDefines the display style, choose between navbar, pills (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

  • Basic Usage
  • How to build a multilevel navigation
Last updated on 11/28/2019 by Swetha Kundaram
← Dropdown Menu - Basic UsageNav Bar →
  • Binding Dataset
  • Add Widgets
  • Nav Types & Layouts
  • Properties
  • Event
  • Use Cases
WaveMaker
  • PRICING
  • PARTNERS
  • CUSTOMERS
  • ABOUT US
  • CONTACT US
Terms of Use | Copyright © 2013-2019 WaveMaker, Inc. All rights reserved.