Remove NavigationBar Back Button Title in SwiftUI

In this tutorial, we will see how to remove the Navigation Bar back button in SwiftUI.

The back button in SwiftUI navigation bars displays the title of the previous view. This can be helpful for navigation, there might be situations where we want to hide it for a cleaner look or specific user experience.

First of all, I will show you what navigation bar back button title I am talking about.

Example

import SwiftUI

// DetailView represents the detailed view that will be navigated to.
struct DetailView: View {
    var body: some View {
        Text("Detail View")
    }
}

// ContentView represents the main content view of the application.
struct ContentView: View {
    var body: some View {
        NavigationView {
            // NavigationLink triggers navigation to DetailView when tapped.
            NavigationLink("Detail") {
                DetailView()
            }
            // Setting the navigation title for the ContentView.
            .navigationTitle("Home")
        }
    }
}

In the above program, I have set the navigationTitle to “Home” for the ContentView.

So, when I navigate to the DetailView it will provide a back button with the title “Home” to back into the main view (ContentView).

Output:

As you can see in the above output, it has used the navigation title “Home” as the back button title in the navigation bar.

Remove NavigationBar Back Button Title

In SwiftUI, when we use NavigationView and NavigationLink to navigate between views, a back button with a default title is automatically added to the navigation bar. The title will be whatever we set in navigationTitle() modifier.

Now, suppose there might be some cases where we want to remove this title for a cleaner appearance. We can do this by using extensions on NavigationView and UINavigationController, and setting an empty title for the backBarButtonItem.

Here are some steps below to achieve this task.

Create SwiftUI Views

First of all, I will create two views ContentView and DetailView. You can create separate files for this.

The ContentView will contain a navigation link to DetailView. The ContentView will be that main view and I will navigate to DetailView from the ContentView.

Example

import SwiftUI

// DetailView represents the detailed view that will be navigated to.
struct DetailView: View {
    var body: some View {
        Text("Detail View")
    }
}

// ContentView represents the main content view of the application.
struct ContentView: View {
    var body: some View {
        NavigationView {
            // NavigationLink triggers navigation to DetailView when tapped.
            NavigationLink("Detail") {
                DetailView()
            }
            // Setting the navigation title for the ContentView.
            .navigationTitle("Home")
        }
    }
}

In the above code, I have used the .navigationTitle() modifier and set “Home” as the navigation title. So when we navigate to another view it will display a back button with the title or text “Home“.

Remove Back Button Title

Now, we need to apply a modification to the UINavigationBar appearance to remove the back button title. We can achieve this by extending UINavigationController and overriding viewWillLayoutSubviews.

extension UINavigationController {
    open override func viewWillLayoutSubviews() {
        navigationBar.topItem?.backBarButtonItem = UIBarButtonItem(title: "", style: .plain, target: nil, action: nil)
    }
}

Here in the above program, I have set the back button title for all instances of UINavigationController to an empty string.

Apply Extension

Now, In the ContentView, I need to apply the extension to remove the back button title when the view appears.

struct ContentView: View {
    var body: some View {
        NavigationView {
            NavigationLink("Detail") {
                DetailView()
            }
            .navigationTitle("Home")
            .onAppear {
                // Apply the extension to remove back button text
                UINavigationBar.appearance().topItem?.backBarButtonItem = UIBarButtonItem(title: "", style: .plain, target: nil, action: nil)
            }
        }
    }
}

In the above program, I have used the .onAppear modifier, and inside this modifier I have applied the extension to set the back button title to an empty string using the extension that I defined earlier. This will remove the Navigation Bar back button.

Here is the complete code below.

import SwiftUI

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

struct ContentView: View {
    var body: some View {
        NavigationView {
            NavigationLink("Detail") {
                DetailView()
            }
            .navigationTitle("Home")
            .onAppear {
                // Apply the extension to remove back button text
                UINavigationBar.appearance().topItem?.backBarButtonItem = UIBarButtonItem(title: "", style: .plain, target: nil, action: nil)
            }
        }
    }
}

// Remove back button text for all instances of UINavigationController
extension UINavigationController {
    open override func viewWillLayoutSubviews() {
        navigationBar.topItem?.backBarButtonItem = UIBarButtonItem(title: "", style: .plain, target: nil, action: nil)
    }
}

Output: