Okay, guys, let's discuss the navigation bar now. Yes, is that bar that is placed directly under the status bar. So why do we even need this navigation bar? Well, because first, it enables the navigation through an information hierarchy throughout your app. And that's basically simply means the navigation through your app as it is. Also, it enables the management of the string content, meaning you can interact in different ways with the content via the navigation bar.
Navigation bars can look very different. It really depends on the things that you're stuffing into there. Here are the most basic examples. The first case is when you have only the title of the current screen. Then, when a new screen is displayed, a back button, often labeled with the title of the previous screen appears on the left side of the bar. You might have a bad pattern and some action buttons on the right.
We have a Cancel button in this example here. In this case, it's just a text based button. It can also be just an icon based button. Or, as we have here on the third picture, it can be a button consisting of both a text and an icon. Here are even more examples of how the navigation bar might look like. In the first example, we have a title and two I can base buttons.
Then on the next one, we have a segmented control in place of title. Then here we have a nav bar with indication of the currently active mode. Here's the one with the web address input and the progress bar. And then we have a navigation bar with the search bar included and it's focused state and here we have a navigation bar with the drop down. By the way, this kind of drop down is not included in the application. headlines, but this element is certainly useful, and we will discuss it in other lecture.
The last example shows the navigation bar with the secondary level, which is scrollable. This kind of element is also not specified by Apple, but it makes sense to use it in some cases, when you have too many items, and they wouldn't fit in the segmented control. Apple guidelines also say that if you have segmented control in your navigation bar, then the bar shouldn't display a title and it shouldn't convey any controls other than the segmented control itself. This is the case that we see in the first image. However, it can be that the segmented control is present together with a title. And even with a button, just like we see on the second picture.
This is actually a screenshot from Apple's own Safari app. So it means that Apple doesn't follow its own guidelines about the segmented control in the navbar Bottom line is here are the two cases of how you can use the segmented control in your navigation bar. Note that the split view which splits the content of the screen also splits the navigation bar. On the other hand, a navigation bar may appear only in a single pane of the split view. And here are just some ways of how an app bark and look in a horizontally regular environments, horizontally regular environments, or as Apple now calls them simply larger screens, our iPads in the new orientation and iPhone six plus in a landscape orientation. The rest of the devices are classified as horizontally compact environments.
Throughout this course, I might be just saying on iPads, meaning all the horizontal irregular environments, including the iPhone six plus in the landscape orientation. So In horizontal irregularly environments, you can have labels and buttons in both left and right pane and different combinations of them. Obviously, since there is more space on iPad screens, because more stuff into the navigation bar, whereas on the iPhones, some of these action buttons and elements would be placed in the toolbar, or would be put in a separate state, like the search input here. For iPads, you can place the search input field right here in the navigation bar. Whereas on the iPhone, you will have a search icon that will transform the navigation bar into the search bar. Same thing goes for the browser tabs on iPads.
The tabs are visible right here. Whereas on the iPhone, you need to go to a separate view to see all the tabs. Now let's take a look at the visual part and see how the navigation bar and status bar can look like So you can have a single solid color and make it translucent or make it opaque. Similarly, you can have a gradient instead of a solid color. And it also can be translucent or a paper. The Status Bar can have a different background and the navigation bar that creates a few more possible combinations of how it all might look like.
Don't go crazy here though, if you want to have a different look and status bar, just picking something simple, like a solid opaque background. In some special cases, you might use a transparent navigation bars that is bar like a deed in this game like app. Finally, you can add a line underneath the navigation bar or not add it. Now, let's move on to the navigation bar behavior. You can stay fixed on the screen if you have transferred In bar, make sure you blur the content behind it. Alternatively, it can disappear and scroll down and reappear on scrolling back up.
Another way to go is to shrink it on scroll down, like you see here. Now let's take a closer look at the navigation bars. common elements. If you have a back button present should always be on the left. Title of the current screen should always be centered in the bar and it has a semi bold font weight by default. The buttons should always be aligned to the right side.
And if possible, there should never be more than one primary action to avoid Miss tabs and to maintain simplicity. You can get away with more if you use only the icons there. Make sure you have enough breathing space and enough space to title though. If you use the icon base buttons, don't stick more than two in There. So by all means, avoid crowding the navigation bar with additional control. And make sure that text based buttons and a title have enough space between them.
Obviously, you got to keep navigation bar style consistent across your app. You cannot have enough bar with a gradient on one screen and a solid color navbar on the other screen, unless there is some really goddamn good special reason for it, but honestly cannot see what kind of reason could that be. The navbar should actually be consistent also with other similar elements like the toolbar. For the Back button, insert a standard built in back arrow and a title of the previous screen. So you can clearly see here that you would go back to chats in this case. Do you use some custom back button, make sure it still looks and behaves like a back button.
Here in my design, I have put a custom made error. And it's perfectly fine for a custom design. By the way, general rule, you either stick with the standard built in iOS look and feel. Or if your design is more custom, then your whole UI should because it shouldn't mix and match styles. This all comes down to the consistency principle of design. I just wanted to point this out for you.
Hide the navbar together with the status bar and the toolbar. When users need to focus on your content. One tap to hide it in one tab to bring it back. Like in the Maps app, for example, as we see here. In horizontal orientation, the nav bar height gets reduced by 12 points on iPads. It does the same though.
Another special case, your navbar might not have a title at all, if it's redundant or simply absent You can also put a hint inside the nav bar to clarify what users can do in the current screen. And finally, you can have a subtitle and an app bar. The font size is supposed to be smaller. You probably should also use a different, more subtle color for it. By the way, you should show the title of the current view in the navigation bar. Because in most cases, the title provides context by letting people know what they're looking at.
Also note that previously, this nav bar title was referred to as a label in the guidelines. Now it's called title. Lastly, do not include breadcrumbs in the navigation bar. You think people might get lost without the full path to the current screen? Consider flattening your apps hierarchy.