Create a NavigationTitle in SwiftUI

Written by Team Kodeco

When creating a list in SwiftUI, it’s typical to add navigation functionality to each row. This feature allows users to tap an item in the list to access more detailed information or navigate to another screen. In this section, you’ll learn how to add navigation functionality to a list in SwiftUI, and specifically, how to set a navigation title.

In SwiftUI, you use the navigationTitle view modifier to set the title of the navigation bar. This title appears when the view is part of a navigation view and is the topmost view on the navigation stack.

Here’s an example of how to add a navigation title to a list in SwiftUI:

struct ContentView: View {
  var body: some View {
    NavigationStack {
      List {
        NavigationLink("Item 1", value: "Item 1 Detail View")
        NavigationLink("Item 2", value: "Item 2 Detail View")
        NavigationLink("Item 3", value: "Item 3 Detail View")
      }
      .navigationTitle("List with Navigation")
      .navigationDestination(for: String.self) { detail in
        DetailView(detail: detail)
      }
    }
  }
}

struct DetailView: View {
  let detail: String
  var body: some View {
    Text(detail)
  }
}

Here’s what your preview should look like:

In this example, we’ve created a list with three items and assigned each one a NavigationLink. When the user taps on an item in the list, they will navigate to the DetailView screen with the detail text associated with that item. We’ve set the title of the navigation bar to “List with Navigation” using the navigationTitle view modifier.

You can also dynamically update the navigation title. Consider this example:

struct ContentView: View {
  @State private var selectedItem = "Item 1"

  @State private var details = [
    "Item 1",
    "Item 2",
    "Item 3"
  ]

  var body: some View {
    NavigationStack {
      List {
        ForEach(details, id: \.self) { detail in
          Button(detail) {
            selectedItem = detail
          }
          .foregroundColor(.black)
        }
      }
      .navigationTitle(selectedItem)
    }
  }
}

If you select Item 3, your preview should look like this:

In this example, the selectedItem state variable is passed to the navigationTitle. When a user taps on an item, the Button action updates selectedItem, and the navigation title dynamically updates to reflect the selected item’s name.

And there you have it! You now know how to add navigation functionality, including dynamic navigation titles, to a list in SwiftUI. Happy coding!