Navigation menus and navigation buttons
There are two ways to move between pages: a menu bar shared by every page, set up in the Page tab, and Navigation button widgets you place on individual pages. Most multi-page projects use both.
Set up a menu bar
Click an empty part of the canvas to show the Page tab.
Under Panel settings, set Menu type to Top, Bottom, Left or Right navigation.
In the Menu items section, click + Add. A Menu Item 1 entry appears with a home icon.
For each item set:
Name: the text on the menu (for example Lounge).
Icon: click to choose from the icon library.
Destination: the page it opens.
Use Move up / Move down to reorder items and Delete to remove one.
Repeat for each page you want on the menu.
The menu is the same on every page, so you only build it once.
Style the menu
Under Menu style:
| Setting | Range / options | Default |
|---|---|---|
| Menu height | 10 to 100 px | 48 |
| Banner height | 0 to 50 px | 0 |
| Item style | Icon left, Icon right, Icon top, Icon bottom, Icon only, Text only | Icon top |
| Icon size | px | 20 |
| Text size | px | 12 |
| Colour | Theme colour token | Button Colour |
| Font / Style | Same font list as widgets; bold, italic | Roboto |
The menu bar's background uses the theme's Menu Colour.
Navigation button widget
Use a Navigation button for links that belong on a page rather than in the menu, for example a Back button, or tiles on a home page that open each room.
Double-click Navigation button in the toolbox (Navigation group).
Set its Widget name and icon (an arrow by default).
Under Navigation, set Navigate to page to the page the button should open.
Navigation buttons share the same styling options as other buttons (see Styling widgets: colours, labels, fonts and element layout).
Test it
Navigation only works in Preview. Click Preview, tap each menu item and navigation button, and check you can always get back to the start page.
Tips
Keep menus to five or six items on a 7 inch panel so labels stay readable.
Icon only menus suit small screens; add clear icons for each room.
To show a page on top of the current one instead of switching to it, use a Popup button (see Popup button).
