The Menu widget organizes pages and is designed to help users get from one page in your app to another. You can change the direction of the menu, choose a style such as tabs or pills, and select a color for the background and active menu.
Example
Use this widget to support app design requirements such as the following:
- You need to create an app that has multiple pages and want to provide users with the ability to get from page to page in a simple intuitive way.
Usage notes
Typically, you would position a menu at the top of a page in the header or body. The Menu widget is automatically populated with the pages, links, and folders as they appear in the Page panel. Names of pages, folders, and links appear in the menu in the order you arrange them unless you click Hide from menu. When you nest pages and links in a page or folder, they appear in the Menu widget as a drop-down menu. A folder provides a drop-down menu that allows the top level to be clicked without changing the page. Users interact with the menu by hovering over or clicking the link, which provides navigation back to the pages in your experience.
Settings
The Menu widget includes the following settings:
- Type—Define the position and appearance of the menu: horizontal, vertical, or icon. The icon type vertically collapses the menu into a modal window on the left or right side of the app.
- Submenu expand mode—The submenu can appear to end users as expanded or foldable. This setting is only available for vertical and icon menu types and is only evident in your app when it contains nested pages or links.
- Appearance—Define the appearance of menu items using the following options:
- Style—Choose a menu style: default, underline, and pills. The colors for each style are inherited from your app's theme.
- Spacing—Define the spacing in pixels between pages listed in the menu.
- Alignment—Determine placement of the text on each menu item. For example, if you create a horizontal menu and choose the Underline style, the page names align with the line: the left or right edge or centered between.
- Show icon—Display an icon for each menu item that identifies it as a page, link, or folder. You can change the default icon for these on the Page panel.
- Advanced—Override your app's theme and specify the menu's background, text, icon, and border colors, size, and style.
- Background—Add a background color to the menu.
- States— Provide a visual representation to communicate the status of the menu using different text and border settings. For example, bold the text, increase the font size, and use a different background color and border style for the Selected state.
- Regular—The default state for the menu without user interaction.
- Hover—The user initiates this state by pointing to a link in the menu.
- Selected—A user selection in the menu.
Tip:
To experiment with these options, click Live view on the builder toolbar.