A UINavigationController is a view controller subclass that makes navigation between multiple view controllers easier. In addition to easier navigation, a navigation controller also has a lot of built-in functionality that we'll explore in this section.

Let's look at Apple's Calendar app to get a better idea of how a navigation controller works.

Let's start with the calendar view of the entire year:

calendar app year view

The top translucent bar at the top of the view controller is called the navigation bar. The navigation bar has a type of UINavigationBar and is automatically configured and setup when we use a navigation controller.

If we tap on a specific month, we can see that navigation controller has changed from displaying the year view controller to the month view controller. The month view controller has been pushed on top of the year-view.

calendar app month view

If we look at the navigation bar at the top, we can also see that there's a back button. Because the year view controller is still below the month view controller, the navigation bar automatically shows a back button for you to pop back to the previous (year) view controller.

As you can see, the UINavigationController provides a lot of convenient functionality for navigating back and forth between multiple view controllers.

From the month view controller, if we tap on a specific day, the navigation controller will push the week view controller onto the current navigation stack.

calendar app day view

So far, our navigation controller stack (in order from front to back) has the following view controllers:

  1. Week View Controller
  2. Month View Controller
  3. Year View Controller

Each view controller is pushed onto the navigation stack and covers the previous view controller. If at any time, we want to go back to the previous view controller, we can tap the back button to pop the front-most view controller off the stack.

For example, if we hit the back button now, the week view controller would be popped off of the navigation stack and the next front-most view controller would be displayed. In this case, the month view controller.

In our Notes app, we'll have two different view controllers.

The first is our existing ListNotesTableViewController. This will always be the bottom most view controller on our navigation stack. It will display a list of all of our notes.

Next, we'll need another view controller to help us display individual notes. Lucky for you, our project already includes DisplayNoteViewController for this specific purpose.

When the user wants to create or view a note, we'll push an instance of DisplayNoteViewController on to our navigation stack. In this view controller, a user can create, edit, or view a note.

But first, we'll need to implement our own UINavigationController.

Implementing Our Navigation Controller

As you can see above, navigation controllers include a lot of functionality for navigating between view controllers. They're also super beginner-friendly and easy to set up.

Open Main.storyboard and embed our existing table view controller in a navigation controller:

  1. Select the existing table view controller.
  2. With the table view controller selected, in the Xcode menu, select Editor > Embed In > Navigation Controller.

Embed In Navigation Controller

You should see your existing table view controller embed within the navigation controller:

Storyboard Navigation Controller

Adding A Navigation Bar Title

Another useful feature that UINavigationController provides, is the ability to give a title name to the top-most view controller that the navigation controller is displaying. This can be helpful for giving users a context for what they're looking at on the screen.

Our table view controller will display a list of notes that the user has created. Let's add a title to our navigation bar.

Set a title for our table view controller:

  1. Select the Navigation Item by clicking on the navigation bar.
  2. Navigate to the Attributes Inspector in the Utilities area.
  3. In the Title field, set the value from empty to Notes.

Set Nav Bar Title

Running the App

We've embed our existing table view controller within a navigation bar. This will allow us to navigate between our DisplayNoteViewController later in this tutorial. Let's build and run to make sure everything still works!

At this point, your app should look like the following:

Nav Bar Checkpoint

Ta-da! Our new navigation bar is looking fineee.


If you have feedback on this tutorial or find any mistakes, please open issues on the GitHub Repository or comment below.

Summer academy

An iOS Development Summer Course

Design, code and launch your own app. Locations in San Francisco and Asia

Find your location

Product College

A computer science college

Graduate into a successful career as a founder or software engineer.

Learn more

Cookies on Make School's website

We have placed cookies on your device to ensure that we give you the best experience on our website.

This site uses cookies to deliver our services. By using our site, you acknowledge that you have read and understand our Cookie Policy, Privacy Policy, and our Terms of Service. Your use of Make School’s Products and Services is subject to these policies and terms.

Please note that Make School no longer supports Internet Explorer

We recommend upgrading to a modern web browser. Learn more