Skip to main content
Version: v11.6.0

Dropdown Menu


A menu displays grouped navigation actions. The drop-down menu is typically used inside the navigation header to display a list of related links on a mouse hover or click on the trigger element.

Dropdown Menu can be used as:

  1. Command menus, which initiate an action based on the option user selects. Each menu item consists of a discrete option or action that can affect the app, the view, or selected elements within a view.
  2. Navigation menus, which take users to a new location. Note that menus should not be used as a primary method for navigation within an app.

WaveMaker Dropdown Menu widget allows one to display a label, an icon and a link to be opened on click event. The data source for the Menu can be a Model variable or from a database. The structure of the data source should contain fields which can be set:

  • Action label - usually caption;
  • Action icon - some graphic image;
  • Action link - specifying the action to be performed and
  • sub action for a nested menu structure.

The Menu Layout - horizontal or vertical and Menu Position can be set as per the app requirements

Properties

PropertyDescription
CaptionThe caption is the text that the end user sees on the Menu label.
NameThe name is a unique identifier for Menu.
Accessibility
HintAny text or HTML you enter for this property will be shown as a tooltip if the mouse hovers over this widget for 1.5 seconds. It can be bound to a variable.
Tab indexThe tab index attribute specifies the tab order of an element. You can use this property to change the default tabbing order for widget access using the tab key. The value can range from 0 to 32767. The default is 0 and -1 makes the element non-focusable.
Shortcut KeyThe shortcut key property specifies a shortcut key to activate/focus an element. (*See below for details)
note

In Safari browsers, by default, Tab highlights only text fields. To enable Tab functionality, in Safari Browser from Preferences -> Advanced -> Accessibility set the option "Press Tab to highlight each item on a webpage".

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%).
Menu LayoutVertical layout arranges the menu items vertically. Horizontal layout arranges the menu items horizontally.
Menu PositionPosition of the menu list items - inline, down-right, down-left, up-left, up-right.
Dataset
ValueSet this property to a variable to populate the list of values to display.
Order bySet this property to order the Menu items.
Actions
Action LabelLabel for menu items. It can be bound to a variable or set to a field from the Dataset Value variable.
Action IconLabel for menu items. It can be bound to a variable or set to a field from the Dataset Value variable.
Action LinkLink for the items. It can be bound to a variable or set to a field from the Dataset Value variable.
note

Item link has priority over onSelect actions i.e. when the link is selected the onSelect actions won't get executed.

Action TaskTask for menu items generated dynamically. This is the action that will be triggered when the user clicks on the Menu Item. It can be a script like: Widgets.label1.show or 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 the 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.
Sub ActionsWhen a menu widget is required the sub-items can be mentioned in the children. It can be bound to a variable or set to a field from the Dataset Value variable.
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.
Link TargetThis defines the app behavior on click of the Item Link. - _blank Opens the linked document in a new window or tab; - _self Opens the linked document in the same frame as it was clicked (this is the default value); - _parent Opens the linked document in the parent frame; - _top Opens the linked document in the full body of the window.
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.
Animation on to contentThis property controls the animation of the menu items. It can be set to slide, fade, or scale. Note: This feature works only in the run mode.
Graphics
Icon ClassThis bindable property defines the class of the icon that is applied to the button.
Format
Horizontal AlignThis property specifies how the elements should be aligned horizontally. It can be Left, Centered or Right

Shortcut key: The shortcut key property specifies a shortcut key to click the button. The way of accessing the shortcut key is varying in different browsers:

BrowserShortcutkey Trigger
Internet Explorer[Alt] + shortcut key
Chrome[Alt] + shortcut key (Windows/Linux)
[Control][Alt] + shortcutkey (MAC)
Firefox[Alt][Shift] + shortcutkey (Windows/Linux)
[Control][Alt] + shortcutkey (MAC)

Events

EventDescription
Callback Events
On SelectThis event handler is called when the tab is selected.

See Also

Creating a Dropdown Menu
Creating Navigation
Restricting Menu Items based on the User Role
Dynamic Menu based on the User Role
Implementing Localization for Dropdown Menu