UserGuide

Web Menus

From Xojo Documentation

A web app cannot have a menu bar like a desktop app, but it can have menus. Two places that menus are used are in Contextual menus for controls and for Menu Buttons on Toolbars.

In both cases, you use the WebMenuItem class to create your menu.

Below is a list of commonly used properties and methods for a Web Menu. Refer to WebMenuItem in the Language Reference for the complete list.

Properties

Tag

A Variant value that is associated with the specific menu.

Text

The text that is displayed for the menu.

Methods

Constructor

Use the Constructor to quickly create a menu with its text.

Append

Adds a menu to a menu.

Usage

Web Menu showing options when right-clicking a row in a Web List Box

To add a contextual menu to a Button, you create the menu in the Shown event handler for the control and assign it to the ContextualMenu property of the Button:

Var menu As New WebMenuitem

menu.Append(New WebMenuItem("Item 1"))
menu.Append(New WebMenuItem("Item 2"))

Me.ContextualMenu = menu

The user can now right-click on the button to show the menu. The ContextualMenuAction event is available for all web controls.

To determine which menu was selected, use this code in the ContextualMenuAction event handler of the Button:

Select Case Item.Text
Case "Item 1"
MsgBox("Item 1 selected.")
Case "Item 2"
MsgBox("Item 2 selected.")
End Select

You can also created submenus by appending a menu to an existing menu. This code creates a Color menu and adds Red and Blue menus to it:

Var b As New WebMenuItem // base menu

Var m1 As New WebMenuItem("Colors")
Var m2 As New WebMenuItem("Red")
m1.Append(m2)
m2 = New WebMenuItem("Blue")
m1.Append(m2)

b.Append(m1)
Me.ContextualMenu = b
Nested Web Menu

You may want to display a contextual menu without using the ContextualMenuAction event. You can use the PresentContextualMenu method of WebControl to display the contextual menu assigned to a control. For example, if you wanted a standard button press to display the menu you could put this code in the Action event handler:

Me.PresentContextualMenu
Using Menus in Web and Desktop Projects

Example Projects

These projects demonstrate how you can use menus:

  • Examples/Web/Menus/WebMenu
  • Examples/Web/Menus/WebToolbarMenu

See Also

WebMenuItem class; UserGuide:Web UI, UserGuide:Web Toolbar topics