Skip to content

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

  1. Create or edit a menu in the applet's menu management.
  2. Open the Design editor for your applet.
  3. Add the Menu widget to the page.
  4. Open the widget settings.
  5. Pick the menu under Show menu and configure Display mode and Link Style.

Widget settings

SettingDescription
Show menuPick which of the applet's menus to display. Required.

Display mode

SettingDescription
Display modePick List (menu items shown as rows on the page) or Toolbar (menu shown as a tab bar at the bottom).
Link StyleList mode only. Pick Button, Card, or Article — controls how each menu row looks.
Submenu display modeOnly 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.

  1. Create a menu in the applet's menu management with four menu items and assign suitable icons.
  2. Add a Menu widget to a page that's part of the app's layout (for example, the page layout).
  3. Pick the menu under Show menu.
  4. 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.