Introduction

What looks like "extra space" at the top of a SwiftUI NavigationView is usually one of two things: space reserved for the navigation bar, or the safe-area inset at the top of the screen. Those are different layers of layout, so the fix depends on whether you want to hide the bar, reduce the title style, or let content extend under the safe area.

First Decide Which Space You Mean

If the navigation bar is visible, SwiftUI reserves room for it. If the bar is hidden but content still appears lower than expected, you are probably looking at safe-area behavior instead.

That distinction is important because no single modifier fixes both problems.

Hide the Navigation Bar

If you want a full-screen layout with no navigation bar space, hide the navigation bar explicitly.

For newer SwiftUI APIs, the preferred style is:

1import SwiftUI
2
3struct ContentView: View {
4    var body: some View {
5        NavigationView {
6            ZStack {
7                Color.orange
8                Text("Full-screen content")
9            }
10            .ignoresSafeArea()
11            .toolbar(.hidden, for: .navigationBar)
12        }
13    }
14}

That removes the navigation bar and lets the content fill the screen.

For older code that still targets earlier iOS versions, you may still see:

1NavigationView {
2    Text("Content")
3        .navigationBarHidden(true)
4}

This still appears in many codebases, but newer toolbar-based APIs are the better long-term direction.

Reduce Large Title Space Instead of Removing the Bar

Sometimes the problem is not the navigation bar itself, but the large-title layout. If you still want navigation controls, switch to the inline title style.

1import SwiftUI
2
3struct ContentView: View {
4    var body: some View {
5        NavigationView {
6            List(0..<10, id: \.self) { item in
7                Text("Row \(item)")
8            }
9            .navigationTitle("Items")
10            .navigationBarTitleDisplayMode(.inline)
11        }
12    }
13}

This keeps the bar but removes the taller large-title appearance.

Safe Area Is a Separate Layout Concern

If the bar is hidden and you still see top spacing, extend your content into the safe area where appropriate.

1import SwiftUI
2
3struct HeroView: View {
4    var body: some View {
5        NavigationView {
6            VStack(spacing: 0) {
7                Color.blue.frame(height: 220)
8                Text("Content below")
9                Spacer()
10            }
11            .ignoresSafeArea(edges: .top)
12            .toolbar(.hidden, for: .navigationBar)
13        }
14    }
15}

Use this carefully. Ignoring the safe area is appropriate for backgrounds, hero images, or custom chrome, but less appropriate for controls that should avoid the notch or status bar.

NavigationStack Is the Modern Replacement

If you are starting new code on current iOS versions, consider NavigationStack instead of NavigationView. The same ideas still apply: hide the bar with toolbar modifiers, use inline titles when you want less height, and manage safe area separately.

1import SwiftUI
2
3struct RootView: View {
4    var body: some View {
5        NavigationStack {
6            Text("Modern navigation")
7                .toolbar(.hidden, for: .navigationBar)
8        }
9    }
10}

This does not change the layout principles, but it aligns the code with current SwiftUI direction.

Common Pitfalls

The biggest pitfall is confusing navigation bar height with safe-area inset. Hiding the bar does not automatically remove all top padding from the layout.

Another issue is keeping a navigation title while expecting no bar space. If a navigation title is still active, SwiftUI will continue to reserve bar-related layout.

Developers also mix old and new APIs in confusing ways, such as combining .navigationBarHidden(true) with toolbar modifiers and then not knowing which behavior is taking effect.

Finally, do not blindly ignore all safe areas just to remove one gap. That can push interactive content under the notch or status bar and create worse UI problems than the original spacing.

Summary

• Identify whether the top gap comes from the navigation bar or the safe area.
• Hide the bar with .toolbar(.hidden, for: .navigationBar) when you want no reserved bar space.
• Use .navigationBarTitleDisplayMode(.inline) when you want a bar without the large-title height.
• Apply ignoresSafeArea only when content should intentionally extend under the top inset.
• Prefer NavigationStack for new SwiftUI code, even though the same layout concepts still apply.