Nav Bars

New!

Lesson Length -

2:50

Nav Bars Are An Essential iOS-Specific Feature For Navigation
Close Video

Resources

Let's Add A Nav Bar

We can add a Nav Bar from our Insert Menu:

Best Practice In most cases, we’ll want a nav bar to the top of almost all our screens. This gives our users a feeling of standard navigation throughout our Judo experience

Stuck Users

As we experienced on the last Lesson, we get stuck on screens if we don’t have a Nav Bar added.

Nav Bars are for when are users are viewing our experience from an iOS device. For the Android equivalent, see the following Lesson on App Bars. The two are separate elements since they are slightly different behavior and and use different nomenclature.

Let's add a Nav Bar to our second screen:

Nav Bar Options

With our Nav Bar selected, in our Inspector Panel, we can now change the Title of our Nav Bar, and also customize the font, button and background colours of our new Nav Bar.

Scroll Appearance

Below this, we can add separate styling options by adding a Scroll Appearance modifier. We’ll see the same options here except this Nav Bar style will be visible only once the user has scrolled down and content has flowed below our Nav Bar.

Then we see an option to hide our Back Button - more on Back Buttons in a moment.

Large Title

Large Title displays our title out-of-line and uses a larger font.

When the user then scrolls past the bottom, the Title will become inline and revert to the standard Nav Bar font size.

With Large Title selected, we now see separate settings for Inline Appearance and Title settings. These settings behave exactly like our Scroll Appearance modifier, but are now called Inline Appearance. So, "Inline" styling options for once the user has scrolled down.

Shadow and Blur

Shadow will appear below our Nav Bar itself and of course we can change its colour, and then the Blur Effect is a translucent blurring effect applied to content as it scrolls beneath our Nav Bar.

Back Buttons

Important: Since the Back Button in our Nav Bar is referencing the screen which we came from, this is where we customize the back button itself.

To customize the Back Button we see on a Nav Bar, we need to click on our previous screen in our Layers Panel. Once we've selected our previous screen, we can then set the Back Button style for any other screens it links to

Back Button Styles:

Use the Default Option when you want to customize what the Back Button says.

Use the Minimal Option to always display "Back" text.

Use the General Option to display a chevron icon as the Back Button only.

So, Nav Bar Back Buttons link to previous screens, Actions links to subsequent screens.

Nav Bar Button

We can also add custom buttons to our Nav Bar.

To do so, we hover over the right side of our Nav Bar and click the plus button:

The left side is also available, but only if "Hide Back Button" has been selected on our Nav Bar.

Once added, it will then show as a separate layer in our Layers Panel:

We can then customize our Nav Bar Button options.

Placement

Either left side (Leading) or right side (Trailing) of our Nav Bar.

Style - Done & Close

By far the most common use of the Nav Bar Button is to display a Done or Close button, which will both close our Judo experience altogether.

Style - Custom

This is used to make a completely custom Nav Bar Button. We can edit the Title displayed, or display an icon instead. We are then presented with our Action options, just like an Action Modifier.

So that covers Nav Bars, which are only for iOS. Next up is App Bars which are for Android.

Was this lesson helpful?

Close
Close