SwiftUI
NavigationTitle
iOS Development
Swift Programming
UI Design

Why doesn't the navigation title show up using SwiftUI?

Master System Design with Codemia

Enhance your system design skills with over 120 practice problems, detailed solutions, and hands-on exercises.

Introduction

The most common reason a navigation title does not appear in SwiftUI is that .navigationTitle() is applied to the NavigationView (or NavigationStack) itself rather than to a view inside it. The title modifier must be placed on a child view within the navigation container. Other causes include missing the navigation container entirely, using deprecated APIs, or inline display mode making the title less visible. Understanding how SwiftUI's navigation modifiers attach to the view hierarchy resolves this issue immediately.

The Wrong Way (Title Does Not Show)

swift
1import SwiftUI
2
3struct ContentView: View {
4    var body: some View {
5        // WRONG: .navigationTitle on NavigationView itself
6        NavigationView {
7            List {
8                Text("Item 1")
9                Text("Item 2")
10            }
11        }
12        .navigationTitle("My Items")  // This does nothing!
13    }
14}

Placing .navigationTitle() outside the NavigationView attaches it to the parent, not the navigation bar. The navigation container does not read modifiers applied to itself.

The Right Way

swift
1import SwiftUI
2
3struct ContentView: View {
4    var body: some View {
5        NavigationView {
6            List {
7                Text("Item 1")
8                Text("Item 2")
9            }
10            .navigationTitle("My Items")  // Inside NavigationView
11        }
12    }
13}

The .navigationTitle() modifier must be on a view inside the NavigationView. It tells the navigation bar what title to display when that view is the current screen.

Using NavigationStack (iOS 16+)

swift
1import SwiftUI
2
3struct ContentView: View {
4    var body: some View {
5        NavigationStack {
6            List {
7                NavigationLink("Detail", value: "detail")
8            }
9            .navigationTitle("Home")
10            .navigationDestination(for: String.self) { value in
11                Text("Detail: \(value)")
12                    .navigationTitle("Detail")
13            }
14        }
15    }
16}

NavigationStack replaces NavigationView starting in iOS 16. The same rule applies — .navigationTitle() goes on child views, not on NavigationStack itself.

Display Modes

swift
1struct ContentView: View {
2    var body: some View {
3        NavigationView {
4            List {
5                Text("Content")
6            }
7            // Large title (default)
8            .navigationTitle("Large Title")
9            .navigationBarTitleDisplayMode(.large)
10        }
11    }
12}
13
14struct InlineView: View {
15    var body: some View {
16        NavigationView {
17            List {
18                Text("Content")
19            }
20            // Inline title — smaller, in the navigation bar
21            .navigationTitle("Inline Title")
22            .navigationBarTitleDisplayMode(.inline)
23        }
24    }
25}

.large shows a big title below the navigation bar (default for root views). .inline shows a smaller title centered in the navigation bar. If you expect a large title but see nothing, check whether .inline mode or scrolling behavior is hiding it.

Title Not Showing in Tabs

swift
1struct TabContentView: View {
2    var body: some View {
3        TabView {
4            // Each tab needs its own NavigationView
5            NavigationView {
6                List { Text("Feed") }
7                    .navigationTitle("Feed")
8            }
9            .tabItem { Label("Feed", systemImage: "house") }
10
11            NavigationView {
12                List { Text("Profile") }
13                    .navigationTitle("Profile")
14            }
15            .tabItem { Label("Profile", systemImage: "person") }
16        }
17    }
18}

When using TabView, each tab needs its own NavigationView (or NavigationStack). Wrapping the entire TabView in a single NavigationView causes layout issues and missing titles.

Title Not Showing After Navigation

swift
1struct MasterView: View {
2    var body: some View {
3        NavigationView {
4            List {
5                NavigationLink("Go to Detail") {
6                    DetailView()
7                }
8            }
9            .navigationTitle("Master")
10        }
11    }
12}
13
14struct DetailView: View {
15    var body: some View {
16        VStack {
17            Text("Detail content")
18        }
19        .navigationTitle("Detail")  // Must be on the destination view
20    }
21}

Each destination view sets its own .navigationTitle(). If the detail view does not have this modifier, the navigation bar shows an empty title when you navigate to it.

Hiding and Showing the Navigation Bar

swift
1struct HiddenBarView: View {
2    var body: some View {
3        NavigationView {
4            VStack {
5                Text("No navigation bar")
6            }
7            .navigationTitle("Hidden")
8            .navigationBarHidden(true)  // Title exists but bar is hidden
9        }
10    }
11}

.navigationBarHidden(true) hides the entire navigation bar including the title. If your title is not visible, check that this modifier is not applied somewhere in the view hierarchy.

Deprecated API

swift
1// iOS 13 (deprecated in iOS 14+)
2.navigationBarTitle("Old API")
3.navigationBarTitle(Text("Old API"), displayMode: .inline)
4
5// iOS 14+ (current)
6.navigationTitle("New API")
7.navigationBarTitleDisplayMode(.inline)

.navigationBarTitle() was deprecated in iOS 14. While it still works, mixing old and new APIs in the same view hierarchy can cause unexpected behavior. Use .navigationTitle() and .navigationBarTitleDisplayMode() consistently.

Common Pitfalls

  • Placing .navigationTitle() on NavigationView/NavigationStack: The title modifier must be on a child view inside the navigation container. Placing it outside is the most common cause of missing titles.
  • Missing NavigationView entirely: .navigationTitle() does nothing without a parent NavigationView or NavigationStack. The modifier only configures the navigation bar — without a navigation container, there is no navigation bar.
  • Wrapping TabView in a single NavigationView: This causes each tab to share one navigation stack, leading to missing or incorrect titles. Each tab should have its own NavigationView.
  • Large title hidden by scroll position: Large titles collapse to inline when the user scrolls down. If your content starts scrolled, the large title may not be visible. Check that the view starts at the top.
  • Conflicting .navigationBarHidden(true): If any view in the hierarchy sets .navigationBarHidden(true), the title disappears. Search for this modifier in your code when debugging missing titles.

Summary

  • Place .navigationTitle() on a child view inside NavigationView or NavigationStack, never on the container itself
  • Use NavigationStack instead of NavigationView for iOS 16+ projects
  • Each TabView tab needs its own navigation container
  • Use .navigationBarTitleDisplayMode(.large) or .inline to control title appearance
  • Each navigation destination sets its own .navigationTitle()
  • Use .navigationTitle() (iOS 14+) instead of the deprecated .navigationBarTitle()

Course illustration
Course illustration

All Rights Reserved.