# Menus

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</api/user_interface/web/webmenuitem>` class to create your menu.

Below is a list of commonly used properties and methods for a Web Menu. Refer to `WebMenuItem</api/user_interface/web/webmenuitem>` for the complete list.

## Properties

`Tag<webmenuitem.tag>` - A `Variant</api/data_types/variant>` value that is associated with the specific menu.

`Value<webmenuitem.Text>` - The text that is displayed for the menu.

## Methods

`Constructor</api/user_interface/web/webmenuitem>` - Use the Constructor to quickly create a menu with its text.

`AddMenuItem<webmenuitem.addmenuitem>` - Adds a menu to a menu.

## Usage

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:

``` xojo
Var menu As New WebMenuitem

menu.AddMenuItem("Item 1")
menu.AddMenuItem("Item 2")

Me.ContextualMenu = menu
```

The user can now right-click on the button to show the menu. The `ContextualMenuAction</topics/user_interface/web/control_hierarchy>` event is available for all web controls.

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

``` xojo
Select Case hitItem.Caption
Case "Item 1"
  MessageBox("Item 1 selected.")
Case "Item 2"
  MessageBox("Item 2 selected.")
End Select
```

You can also created submenus by adding them to an existing menu. This code creates a Dark Wizards menu and adds Sauron and Saruman menus to it:

``` xojo
Var myMenu As New WebMenuItem

Var menuItem1 As New WebMenuItem("Dark Wizards")
Var subMenuItem1 As New WebMenuItem("Sauron")
Var subMenuItem2 As New WebMenuItem("Saruman")
menuItem1.AddMenuItem(subMenuItem1)

myMenu.AddMenuitem(menuItem1)
Me.ContextualMenu = myMenu
```

<div id="/topics/user_interface/web/menus/see_also">

<div class="seealso">

`WebMenuItem</api/user_interface/web/webmenuitem>` class; `Toolbar</api/user_interface/desktop/desktoptoolbar>` topic

</div>

</div>