Menu Widget
The Menu widget displays a menu you have created in the applet. It's used for navigation — either as a list on a page or as a toolbar at the bottom of the app.
When to use this
- You want a home page with several entry points to different applets or pages
- You need a bottom menu (toolbar) for primary navigation
- You have a menu with submenus that should be shown in a single block
How it works
The menu itself is created separately in the applet — the Menu widget is just the display layer. You first pick which menu to show, then how it should look. The available style options and submenu settings depend on the display mode: a list on a page exposes more options than a toolbar.
Add a menu
- Create or edit a menu in the applet's menu management.
- Open the Design editor for your applet.
- Add the Menu widget to the page.
- Open the widget settings.
- Pick the menu under Show menu and configure Display mode and Link Style.
Widget settings
Menu
| Setting | Description |
|---|---|
| Show menu | Pick which of the applet's menus to display. Required. |
Display mode
| Setting | Description |
|---|---|
| Display mode | Pick List (menu items shown as rows on the page) or Toolbar (menu shown as a tab bar at the bottom). |
| Link Style | List mode only. Pick Button, Card, or Article — controls how each menu row looks. |
| Submenu display mode | Only when List + Article is selected. Pick Replace (the submenu replaces the current view) or Expand (the submenu unfolds under the row). |
Style
Click Edit Style to open the style editor and adjust colors, margins, and other appearance settings for the menu.
Example
Scenario: You want a bottom menu in your app with four main entry points — Home, Search, Notifications, and Profile.
- Create a menu in the applet's menu management with four menu items and assign suitable icons.
- Add a Menu widget to a page that's part of the app's layout (for example, the page layout).
- Pick the menu under Show menu.
- Set Display mode to Toolbar.
The app now shows a bottom menu with the four entry points.
Tips
TIP
Set Display mode to Toolbar when the menu should serve as primary navigation across the whole app. To make the menu appear on every page, place the widget in the app's shared layout — not on a single page.
TIP
Article with Expand is useful for long menus with submenus — the user gets both the overview and detailed navigation without leaving the page.
Common mistakes
WARNING
If the menu shows no items, check that a menu is actually selected under Show menu and that the menu contains items. Empty menus render as nothing.
WARNING
Toolbar ignores Link Style. To control the tab bar's appearance, use the style editor instead.