Menu bar
The Menu bar object gives a screen a menu like a desktop application: a bar of titles such as File, View and Help, each opening a drop-down list. An item at the end of a branch runs click actions, for example opening a page.
Before you begin
- A page is open in the screen editor.
- You know the click actions; see Click actions.
Steps
1. Place the menu bar
In the Form / HTML group of the palette, click Menu bar and draw it on the page. A new menu bar is 600 × 28 and comes with sample items: File (Home, a separator, Exit), View (Alarms, Trend) and Help (About). Replace them with your own labels.
2. Edit the items
Select the menu bar. In the Properties panel, the Menu group holds Menu items:
- Type the text of an item in its Label box. ↑ and ↓ move it, ✕ deletes it.
- + Add item adds an item, + Separator a separator line. A separator shows only in a drop-down list.
- Click ▸ next to an item to open its details. There, + Add sub-item gives it a submenu; submenus can be nested to any depth.
3. Set what an item does
Open the details of an item without sub-items. Under On click, add the actions as for any clickable object, for example Navigate to Page. The number of actions shows next to the label.
An item that has sub-items opens its submenu and runs no action. In the details you can also type a Shortcut, for
example Ctrl+P, and tick Inactive. The shortcut text is shown at the right of the item. An inactive item is greyed out and cannot be clicked.
4. Try the menu
Click Run in the editor or open the page on the runtime screen. Click a title to open its list. While a list is open, moving the pointer to the next title opens that one. A click outside the menu or Esc closes it. In the design view the menu does not open.
Result
The menu bar opens its lists on the runtime screen, and an item runs its actions. Write, confirmation and permission rules apply as for the same action on a button.
Other settings
| Group | Setting | Default | Effect |
|---|---|---|---|
| Menu | Direction | Horizontal | Horizontal: a bar at the top, lists open downwards. Vertical: a list at the side, lists open to the right |
| Font | Font Family, Font Size, Text Color | page font, 13, #1f2937 | Text of the bar and the lists |
| Appearance | Background, Drop-down, Highlight color, Border | #f3f4f6, #ffffff, #e5e7eb, #d1d5db | Color of the bar, of the lists, of the item under the pointer and of the frame |
A list that would leave the screen moves to the left or upwards. The lists are scaled with the page.