SwiftUI NavigationView tutorial with examples

NavigationView in SwiftUI is a container view which allows you to manage other views in a navigation interface. Learn how to customize navigation bar with a title (large or small), add leading and trailing buttons to the navigation bar, and implement a master-detail flow where you can push detail view on top of the master view.

Create NavigationView

Convert your view into NavigationView like that:

struct ContentView: View {
    var body: some View {
        NavigationView {
            Text("SwiftUI tutorials")
        }
    }
}

Add a title to the NavigationView

Use the navigationBarTitle() modifier inside of the NavigationView to create a navigation bar with a title:

NavigationView {
    Text("SwiftUI tutorials")
    .navigationBarTitle("Master view")
}
Example of NavigationView in SwiftUI with large title
Example of NavigationView in SwiftUI with large title

Customize the navigation bar title

By default, the navigation bar title uses a .large display mode, which is presented in the screenshot above.

Change the title display mode of the navigation bar to .inline to make the title small:

NavigationView {
    Text("SwiftUI tutorials")
    .navigationBarTitle("Master view", displayMode: .inline)
}
Example of NavigationView in SwiftUI with small title
Example of NavigationView in SwiftUI with small title

Add buttons to the navigation view

Add leading and trailing buttons to the navigation bar using navigationBarItems() modifier. Leading button is an SF Symbol, trailing button is text:

NavigationView {
    Text("SwiftUI tutorials")
    .navigationBarTitle("Master view")
    .navigationBarItems(leading:
            Button(action: {
                print("SF Symbol button pressed...")
            }) {
                Image(systemName: "calendar.circle").imageScale(.large)
            },
        trailing:
            Button(action: {
                print("Edit button pressed...")
            }) {
                Text("Edit")
            }
    )
}
Example of NavigationView in SwiftUI with leading and trailing buttons
Example of NavigationView in SwiftUI with leading and trailing buttons

You can add multiple buttons to the leading or trailing bar items by using an HStack:

NavigationView {
    Text("SwiftUI tutorials")
    .navigationBarTitle("Master view")
    .navigationBarItems(trailing:
        HStack {
            Button(action: {
                print("SF Symbol button pressed...")
            }) {
                Image(systemName: "calendar.circle")
                    .imageScale(.large)
            }
            Button(action: {
                print("Edit button pressed...")
            }) {
                Text("Edit")
            }
        }
    )
}
Example of NavigationView in SwiftUI with multiple trailing buttons
Example of NavigationView in SwiftUI with multiple trailing buttons

How to push new view onto NavigationView

In order to implement the master-detail flow and present a detail view on top of the master view in NavigationView use NavigationLink – a button that triggers a navigation presentation when pressed:

struct DetailView: View {
    var body: some View {
        Text("Detail view")
    }
}

struct ContentView: View {
    var body: some View {
        NavigationView {
            NavigationLink(destination: DetailView()) {
                Text("Show detail view")
            }
            .navigationBarTitle("Master view")
        }
    }
}

The NavigationView automatically handles adding the back button when detail view is presented.

Example of detail view using NavigationView in SwiftUI
Example of detail view using NavigationView in SwiftUI

If you’d like to add a title to the detail view, use the navigationBarTitle() modifier inside of your DetailView body:

struct DetailView: View {
    var body: some View {
        Text("Detail view")
        .navigationBarTitle("Detail view", displayMode: .inline)
    }
}
Example of NavigationView's detail view with a title
Example of NavigationView’s detail view with a title

Related tutorials:

Check out Apple’s official documentation of NavigationView.