From Xojo Documentation

Class (inherits from WebControl)

New in 2011r2

For desktop applications, see Toolbar.

Adds a toolbar to a WebPage.

ButtonAction Hidden MouseExit
Close KeyPressed MouseMove
ContextualMenuAction LostFocus MouseUp
DoubleClick MenuAction Open
DropObject MouseDown Resized
GotFocus MouseEnter Shown

ButtonDisabledStyle ItemStyle Style
ButtonStyle Left ToggledDisabledStyle
ContextualMenu LockBottom ToggledStyle
ControlID fa-lock-32.png LockHorizontal Top
Cursor LockLeft Vertical fa-lock-32.png
DragOverStyle LockRight VerticalCenter
Enabled LockTop Visible
Height LockVertical Width
HelpTag Name fa-lock-32.png Zindex
HorizontalCenter Page fa-lock-32.png
ItemCount fa-lock-32.png Parent fa-lock-32.png

AcceptPictureDrop AppendItem MsgBox
AcceptRawDataDrop Close PresentContextualMenu
AcceptTextDrop ExecuteJavaScript RemoveItem
AllowPictureDrag InsertItem SetFocus
AllowRawDataDrag ItemAtIndex ShowURL
AllowTextDrag ItemWithName


To use a WebToolbar, drag a Toolbar control to a WebPage. By default, it is sized to fit the width of a default WebPage. Initially, there are no items on the Toolbar. You first add the items, rearrage them as needed, assign properties to them, and then write code to handle user input. In the case of a menu, you need to write a few lines of code to populate the menu with its menu items.

To add an item:

  • Click on the pencil icon: A plus sign appears in the top-left corner.
  • Click on the plus sign to add a toolbar item: A contextual pop-up menu of choices appears showing the following types of items you can add to the toolbar:
    • Button
    • Menu
    • Separator
    • Space
    • Flexible Space
    • Container
  • Choose the desired type of item from the list: The item is added to the toolbar. As you add items, they are left-aligned within the toolbar.

Setting the Properties of Toolbar Items

When the green plus sign is visible, each control in the toolbar is selectable and editable (When it is not shown, the toolbar control itself is selecable). When the toolbar items are selectable, the Properties pane for the Toolbar adds a new group for the selected control. The new group is called "Selected Item". It has the following properties:

  • Item Name: The name of the toolbar item.
  • Item Super: The super class of the item: WebToolbarSeparator, WebToolbarSpace, WebToolbarFlexibleSpace, WebToolbarMenu, or WebToolbarButton.
  • Has Icon: Boolean, by default it is True.
  • Caption: The label for the item, if it has one. By default it is "Untitled".
  • Icon: The image that appears in the item. Use sizes such as 32x32 or 16x16. For retina displays you can use 64x64.
  • Enabled: Boolean, by default it is set to True.

See the ButtonAction and MenuAction events for example of how button clicks and menu selections are handled. See the Shown event handler for the code that populates the menu.


This example shows you how to use toggle with multiple buttons on a toolbar. When clicking a button, it turns off the toggle on the other buttons and turns on the toggle for the clicked button.

Var button As WebToolbarButton

For i As Integer = 0 To Me.ItemCount - 1
If Me.ItemAtIndex(i) IsA WebToolbarButton Then
button = WebToolbarButton(Me.ItemAtIndex(i))

If Item = button Then // Select the button that was clicked
button.Toggled = True
Else // Deselect the other buttons
button.Toggled = False
End If

End If

This code adds a nested menu to a menu button:

// Create the menu
Var chartMenu As New WebMenuItem
Var lineMenu As New WebMenuItem("Lines")
lineMenu.Append(New WebMenuItem("Dotted lines"))
lineMenu.Append(New WebMenuItem("Solid lines"))

// Assign it to the button
Var chartButton As WebToolbarMenu
chartButton = WebToolbarMenu(Me.ItemWithName("ChartsButton"))
chartButton.Menu = chartMenu

Items designed in the toolbar editor can be accessed by their name like this:

Toolbar1.Button1.Caption = "Hello"

See Also

WebToolbarButton, WebToolbarContainer, WebToolbarFlexibleSpace, WebToolbarMenu, WebToolbarSeparator, WebToolbarSpace classes.