Menus

A menu is a collection of links you can show on a page with the Menu widget. Use menus to connect the applet — link to other applets, pages in the current applet, external addresses, or to notifications.

When to use this

• You want to build a navigation structure in an applet
• You need several different menus for different contexts — for example a main menu, a quick-links menu, and a toolbar menu
• You want a menu that dynamically lists every page matching specific tags

How it works

Menus are managed at two levels:

1. Menu — a named container you create in the applet.
2. Menu items — every link or header inside the menu. Menu items can have submenus.

To show a menu in the app, add the Menu widget to a page and point it at a menu you've created.

Create a menu

1. Open your applet.
2. Go to Menus in the side menu.
3. Click Create menu.
4. Enter a name.
5. Save.

Once the menu is created, you can add menu items.

Menu items

Menu items are the individual rows in the menu. Click Add menu item to create one.

Menu item types

Type	What it does
Applet	Links to another applet in the same app. The user is taken there on click.
Page	Links to a specific page in an applet — or dynamically to all pages with certain tags.
External	Links to an external URL (must start with https://).
Header (non-link)	A header without click action — for visually grouping menu items.
Notification	Links to a page and shows a notification badge when there are unread notifications for the user.

Configure a menu item

Depending on the type, you get different settings:

Setting	Shown for	Description
Select applet	Applet, Page (dynamic)	Pick which applet the item points at.
Dynamic (page tags)	Page	Turn on to make the menu item automatically expand to all pages with the chosen tags in the selected applet.
Tags	Page (dynamic)	Which page tags to match.
Select page	Page (static), Notification	Pick a specific page to link to.
Address	External	The external URL.
Name	All except dynamic Page	The text shown in the menu.
Icon	External, Header	Icon shown next to the text.
Image file path	External	URL to an image to show instead of an icon.
Open in new tab	Applet, Page, External	When on, the link opens in a new tab instead of in the same view.

TIP

Use Header (non-link) to create dividers in longer menus — for example "My pages" before user-specific links and "Shortcuts" before general links.

Dynamic menus

Turn on Dynamic (page tags) for a Page menu item to make it automatically show every page in an applet that has certain tags. Add pages with the right tags and they appear in the menu — without you needing to update the menu by hand.

TIP

Dynamic menus are great for content that grows over time — for example a "Latest news" menu listing every page with the tag news.

Submenus

Click Add menu item from inside an existing menu item to create a submenu. Submenu items are menu items with a parent — they appear indented in the menu.

TIP

Use submenus sparingly. Two levels is usually enough — more levels make navigation hard to scan on small screens.

Reorder menu items

In the list view, drag and drop menu items to change the order. The order saves immediately.

Delete a menu item

Hover over the menu item in the list and click the trash icon. The deletion is permanent.

Show the menu in the app

Add a Menu widget to a page and pick your menu in the widget settings. The widget can show the menu as a list, a card, or a toolbar at the bottom of the app.

Example

Scenario: You want to build a main menu for an internal app with fixed links to home, news, and contact — plus a dynamic section listing every policy page.

1. Create the Main menu.
2. Add the Home menu item — type Page, pick the Home page, icon home-outline.
3. Add the News menu item — type Notification, pick the News page so a badge shows on new content.
4. Add the Contact menu item — type Page, pick the Contact page, icon mail-outline.
5. Add a Header (non-link) named Policies.
6. Add the Policies menu item — type Page, turn on Dynamic, pick the applet and the tag policy.
7. Add a Menu widget to the Home page and select Main menu.

You now have a main menu with three fixed links and an auto-generated list of every page tagged policy.

Tips

TIP

Use the Notification type for links that should highlight new content — for example newsfeeds, chats, or unread form responses.

TIP

Build several menus for different contexts instead of one giant menu. A "main menu" for navigation, a "shortcuts" menu on the home page, and a "tools" menu in the footer give cleaner pages and clearer intent.

Common mistakes

WARNING

External links must start with https://. Addresses with http:// or no protocol aren't accepted.

WARNING

Dynamic menus need the selected applet to contain pages with matching tags. If AppStudio finds no matches, the menu item is empty in the app.

WARNING

If you delete a page a menu item points at, the link breaks. Update the menu when you clean up pages.