A navigation bar is a native page header that houses the page's title, hierarchical information, and relevant page controls. Nav bars in Play are built as a property of the page. You can choose to add the nav bar to some pages and not to others, but the tab bar will be consistent across any pages it is on.

In macOS, turn the nav bar on in the attribute panel titled Navigation. Click the pop-up icon to customize all properties. To adjust the visibility of the nav bar on the page, use the Navigation Bar Visibility property which is below the Navigation Bar switch.

On iOS, flip the Navigation Bar property switch in the Navigation tab of the attribute panels.

Show a large title, small title, or inherit the style from the previous page.

Each "item" is a button on either the left or ride side of the nav bar. We provide a list of presets that can be text like "Edit" or "Cancel" or icons like Search and Add. You can also create a custom item with an icon, title, and tint.

You can link pages, which will function as Open Page actions when a bar item is tapped, or, if you want to get more custom, you can create interactions with Set State or property actions using an Event Listener trigger. Read more about this at the bottom of this article.

You can hide the full nav bar when user interaction occurs. Choose if the nav bar should hide when a user taps the page (On Tap), a user scrolls down on the page (On Scroll), and/or a user opens the keyboard (Keyboard Appears) by flipping the associated switch. You can choose all three, just one or two, or none.

A nav bar's prompt is a single line of text that appears at the top of the nav bar intended to prompt the user about the page's content.

Turn on Enable Back to show the page's back button and enable the built-in "Dismiss Page" edge pan gesture that will take the user to the previous page.

Turn on Page Title On Subpage to display the name of the page you are currently on within the back button on any subpage's nav bar. If the name does not fit, due to its length or left bar items on the subpage, the page's name will not be displayed, even if the switch is flipped.

Note: In UIKit, what we call Default Appearance is called Scrolled Edge Appearance

The right side of the Default Appearance slider opens a sub-panel with appearance properties for the nav bar when it is not scrolled down the page.

Add a blur or system material to the nav bar's background with the Blur Effect property.

Turn on to add Apple's native nav bar shadow.

Choose the color of the nav bar items from your color styles. If you have custom bar items with their own tint color, that color will override the overall tint.

Choose the color of the nav bar's background from your color styles.

Choose the color of the title from your color styles.

Similarly, the Scrolled Appearance property adjusts the same above properties when the nav bar is scrolled.

Note: In UIKit, what we call Scrolled Appearance is called Default Appearance

The Navigation Bar Visibility property is in the Navigation Panel, not inside the Navigation Bar pop-up.

If the Navigation Bar switch is turned on, the Navigation Bar Visibility options will be "Show" or "Hide." Since the nav bar is on (and thus designed), the visibility determines whether it should be shown or hidden by default. The visibility will be able to be changed via interactions in the future.

If the Navigation Bar switch is turned off, the Navigation Bar Visibility options will be "Auto" or "Hide." If Auto is selected, the nav bar from the previous bar will be visible on the current page, and if Hide is selected, no nav bar will be shown.

You can add functionality to the nav bar items by linking them to other pages, or, for more custom interactions, linking actions and using the new Event Listener trigger. We go into detail on events in this article.

To link pages, you'll click on the chain link icon on the right side of each bar item. On the drop-down that appears, you'll see a list of every page in your project. You can select any of those pages, and when a user taps that bar item, it will open the selected page exactly as a default Open Page action would.

To create a custom interaction when the user taps a bar item, you'll want to assign the bar item an event. To do this, you'll still click on the chain link icon, but you'll instead go down to the "Trigger Event" option. On the secondary drop-down that appears, you can select an existing event or create a new one.

Once you have the bar item connected to an event, you'll go into Interaction Mode where you'll see an Event Listener trigger that we've added for you. We've also selected your chosen event within the trigger. From here, you'll just add whatever actions you'd like to fire when the bar item is selected. Simple as that!