SwiftUI Hide Navigation Bar For Better User Experience

Hiding the navigation bar in SwiftUI is a practical approach for creating minimalistic interfaces or when you want a navigation bar to dynamically appear or disappear based on the screen's content.

In this blog, we'll cover how to achieve this using view modifiers, provide examples of customizing the navigation title, and ensure you're following best practices for navigation stack implementations.

Why Hide the Navigation Bar?

Sometimes, a visible navigation bar can take up space unnecessarily, especially when the user interacts with a screen where the focus is entirely on the content. SwiftUI gives developers the ability to hide or show the navigation bar dynamically with straightforward methods.

Setting Up the SwiftUI Project

To demonstrate how to hide the navigation bar, let’s start by creating a SwiftUI project. Open Xcode and set up your project with a basic NavigationView structure. Here’s an example:

1import SwiftUI
2
3struct ContentView: View {
4    var body: some View {
5        NavigationView {
6            VStack {
7                Text("Home Screen")
8                    .font(.title)
9                    .padding()
10
11                NavigationLink(destination: DetailView()) {
12                    Text("Go to Detail View")
13                        .foregroundColor(.blue)
14                        .padding()
15                }
16            }
17            .navigationTitle("Home")
18        }
19    }
20}
21
22struct DetailView: View {
23    var body: some View {
24        Text("Detail View")
25            .font(.title)
26            .navigationTitle("Details")
27    }
28}

​

This simple NavigationView sets up two screens: a home screen and a detail view. Notice how the navigation bar is visible by default, with a navigation title displayed for each screen.

Hiding the Navigation Bar

To hide the navigation bar, we use the .navigationBarHidden(true) modifier. This modifier can be applied to specific views within your navigation stack.

Updated Code to Hide the Navigation Bar

Here’s how you can update the ContentView and DetailView to hide the navigation bar:

1import SwiftUI
2
3struct ContentView: View {
4    var body: some View {
5        NavigationView {
6            VStack {
7                Text("Welcome to the App")
8                    .font(.title)
9                    .padding()
10
11                NavigationLink(destination: DetailView()) {
12                    Text("Go to Detail View")
13                        .padding()
14                }
15            }
16            .navigationBarHidden(true)
17            .navigationBarTitleDisplayMode(.inline)
18        }
19    }
20}
21
22struct DetailView: View {
23    var body: some View {
24        VStack {
25            Text("This is the Detail Screen")
26                .font(.title)
27        }
28        .navigationBarHidden(true)
29    }
30}

​

In the updated code, the .navigationBarHidden(true) modifier hides the navigation bar for both the home screen and the detail view. You can toggle this setting based on user interactions or specific screens.

Customizing Navigation Bar Appearance

Adding Buttons to the Toolbar

Using the .toolbar modifier, you can add buttons to enhance the functionality of your app while still keeping the navigation bar hidden. For instance:

1struct ContentView: View {
2    var body: some View {
3        NavigationView {
4            VStack {
5                Text("Main Content")
6                    .font(.title)
7                    .padding()
8
9                NavigationLink(destination: DetailView()) {
10                    Text("Navigate to Details")
11                }
12            }
13            .toolbar {
14                ToolbarItem(placement: .navigationBarLeading) {
15                    Button(action: {
16                        print("Back button tapped")
17                    }) {
18                        Image(systemName: "arrow.backward")
19                    }
20                }
21                ToolbarItem(placement: .navigationBarTrailing) {
22                    Button(action: {
23                        print("Settings tapped")
24                    }) {
25                        Image(systemName: "gear")
26                    }
27                }
28            }
29            .navigationBarHidden(true)
30        }
31    }
32}

​

This example demonstrates how to add buttons to the toolbar without displaying the navigation bar itself.

Advanced: Dynamic Visibility

To dynamically hide or show the navigation bar based on specific user actions, you can use state variables. Here’s how:

1import SwiftUI
2
3struct ContentView: View {
4    @State private var isNavigationBarVisible: Bool = false
5
6    var body: some View {
7        NavigationView {
8            VStack {
9                Toggle("Show Navigation Bar", isOn: $isNavigationBarVisible)
10                    .padding()
11
12                NavigationLink(destination: DetailView()) {
13                    Text("Go to Detail View")
14                }
15            }
16            .navigationBarHidden(!isNavigationBarVisible)
17            .navigationTitle("Dynamic Visibility")
18        }
19    }
20}

​

When the toggle is switched, the navigation bar becomes visible or hidden, giving you control over its appearance.

Handling the Back Button Behavior

If you hide the navigation bar, the back button might not be visible. To resolve this, you can add buttons manually. Here’s an example:

1struct DetailView: View {
2    @Environment(\.presentationMode) var presentationMode
3
4    var body: some View {
5        VStack {
6            Button(action: {
7                presentationMode.wrappedValue.dismiss()
8            }) {
9                Text("Go Back")
10                    .foregroundColor(.green)
11            }
12        }
13    }
14}

​

In this case, the back button is replaced with a button that performs a custom action.

Key Takeaways

1. Use .navigationBarHidden(true) to hide the navigation bar on specific screens.

2. Leverage view modifiers like .toolbar to maintain functionality without a visible navigation bar.

3. Dynamically control the appearance of the navigation bar using state.

4. Always test how hiding the navigation bar affects navigation title placement and the user experience.

5. Ensure content does not get obstructed when hiding the navigation bar.

Final Thoughts!

Hiding the navigation bar in SwiftUI allows developers to create minimalistic designs while maintaining core navigation functionality. With modifiers like .navigationBarHidden and .toolbar, developers can fine-tune the appearance and placement of buttons, titles, and content. Try implementing these tips in your SwiftUI project to optimize the user interface and reduce unnecessary screen space usage.

By following this guide, you'll master how to hide the navigation bar effectively and add buttons or dynamic text elements while ensuring a seamless app experience.

Short on time? Speed things up with DhiWise!

Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!

You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.