A Navigation Bar (Nav Bar) appears at the top of an app to speed navigation and to provide access to key functions such as push notifications. And it provides consistent navigation tools across mobile, desktop, browsed, and installed apps.
When enabled, a Nav Bar is always present. It remains at the top of the page when one scrolls through an app and it remains visible when one navigates to other pages in an app.
App with Nav Bar at the top:
A nav bar always appears on installed apps because the user otherwise does not have access to a browser's navigation control. Optionally, the Nav Bar can also appear on all versions of an app, including browsed versions. You activate the Nav Bar on the Style tab.
If you do not activate the Nav Bar, one will still appear on installed apps because no alternate browser navigation tools exist. In this instance the "Push" and "Share" controls will determine if these icons appear in the installed version of the Nav Bar.
Nav Bar Controls in the Style Tab:
A Nav Bar always include a navigation button to refresh a page or return to the previous page and a Home button.
A Nav Bar optionally includes:
- a brand logo or icon
- a share button
- a web push subscription/mute button
- color customization
- a Hamburger menu
If you want the Hamburger menu to apear in your Nav bar, then select which Hamburger Action you want to use on the lower right of the Navigation section of the Style tab.
Because Actions are specific to a page, a Hamburger menu is treated differently when added to a Nav Bar because it appears on all pages in the app. When you add a Hamburger menu to a Nav Bar, its Edit Module will appear above the Action selector in the app to separate it from other Actions.
Example Placement Hamburger Edit Module
- When a Hamburger menu is embedded in a Nav Bar, if you use the Advanced Style setting to change colors of the Hamburger menu, it will also update the color style of the Nav Bar.
- When a Hamburger is embedded in a Nav Bar, it will not be copied with other Actions when cloning or copying a template. It will copy over with the app's style.
- A Hamburger Action must be created before it can be added to the Nav Bar in the Style section. If it is displayed in the area above the action selector, it may be removed from the Action section of the app.
- A Hamburger menu may be used independent of a Nav Bar and may optionally be shown on the left or right. When used stand alone, a Hamburger Edit Module will apear in the regular section for Actions.
- The Hamburger Action includes a control option for left or right placement. This control will also move the Hamburger icon in a Nav Bar if enabled.