Choosing a Navigator Type
The navigator type picks the container your navigation entries render in: the built-in bar, a bottom bar, a slide-out drawer, a module you build yourself, or nothing at all. In the builder it is the Navigation Style setting.
Note: Navigation Style is configured in Settings → Development → Navigation → Appearance. Each breakpoint is configured on its own, so a web app can be a sidebar on desktop and a bottom bar on phones. See Responsive Navigation for details.
The Five Navigation Styles
Navigation Style | Breakpoints | What it renders |
|---|---|---|
Standard | XL, LG, MD (default) | The built-in bar. The Position setting decides whether it is a sidebar, a top bar or a bottom bar. |
Custom | XL, LG, MD | A module you build, used in place of the built-in bar. Selecting Custom shows a Module picker. |
Bottom Bar | SM (default) | A row of tabs pinned to the bottom of the screen. |
Drawer | SM | A panel that slides in from the Start or End edge. Pick a side when you select it. |
None | SM | No navigation. Users move between pages only through your own buttons and links. |
A mobile app is configured at the SM breakpoint only, so it offers Bottom Bar, Drawer and None. A web app offers Standard and Custom at XL, LG and MD, and the mobile set at SM. There is no None option for XL, LG or MD, so a web app always shows navigation on desktop and tablet.
Standard
Standard renders your Menu Items and Secondary Menu Items in the built-in bar, styled from the Appearance tab. Set Position to Start for a sidebar or Top for a top bar. LG and MD also offer Bottom. A bottom bar shows plain page entries only: groups, the Profile entry and secondary items are left out.
Custom
Custom replaces the built-in bar with a module. Build the menu from ordinary blocks inside the module, then pick it in the Module field. The styling controls in the Appearance tab no longer apply, so style the menu with the blocks in the module. Custom isn't offered at SM or in mobile apps. In a mobile app, choose Bottom Bar or Drawer, then click Create custom bottom bar or Create custom drawer under Styling to build that bar as a module you can edit. See Custom Navigation Module.
Bottom Bar
Bottom Bar shows each primary menu entry as a tab. A mobile app accepts up to 15 primary items. The bottom bar shows every item with no "More" menu, so keep it to about 5 and use the Drawer for more. Groups, the user menu, secondary items and URL items are not shown in the bottom bar. In a web app, an entry you drag to Hidden in overflow in the Appearance tab is removed from the bar, not moved to a menu.
Drawer
Drawer opens a side panel that covers the page until it is dismissed. It suits apps with many destinations, and it supports Nav Groups for grouping related entries.
None
None renders no navigation at that breakpoint. Add your own buttons or links to every page first, for example with the Go to Page action, so users are never stuck on a page.
Related Settings
Opening page: set with Default Page in the Navigation Content tab.
Transitions: set with Page Transition in the Appearance tab (web apps) or Transition Behavior in Page Settings (mobile apps). See Page Transitions.
Switching Navigation Style
Open Navigation settings: Go to Settings → Development → Navigation, then click the Appearance tab.
Select the breakpoint to change: Under Breakpoints, click the device icon for the breakpoint you want to update: laptop (XL), horizontal tablet (LG), vertical tablet (MD) or phone (SM). Other breakpoints keep their own style.
Choose the new style: At XL, LG or MD, click Standard or Custom under Navigation Style. At SM, pick Bottom Bar, Drawer or None from the Navigation Style dropdown. The preview in the builder canvas updates immediately.
Check your menu items: Some item types are not shown by every style (for example, Nav Groups are not shown in a bottom bar). Preview each breakpoint and adjust your items if needed.