Hide the navigation back button in SwiftUI

In this tutorial, we will see how to hide the navigation back button in SwiftUI.

SwiftUI provides a modifier called navigationBarBackButtonHidden(), by specifying the boolean value true into this modifier we can hide the navigation back button in our app.

Syntex

.navigationBarBackButtonHidden(true)

The above code will hide the default back button that appears in the navigation bar when we navigate to another view.

If we change it to false or leave it out, the back button will be displayed again.

Create two simple views to navigate

First of all, I will create two views and navigate one view to another view to see what back button we are talking about.

Example

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView {
            // Create a NavigationLink to navigate to anotherView
            NavigationLink("Navigate to another view", destination: anotherView())
        }
    }
}

struct anotherView: View {
    var body: some View {
        // Display a text in another view
        Text("This is aother view")
    }
}

In the above program, I have created two views (ContentView and anotherView) where ContentView has a NavigationLink.

The NavigationLink will create a clickable link labeled “Navigate to another view” in a SwiftUI interface. When we click or tap the link, it will navigate us to another view showing the text “This is another view” with a back button in the top left corner of the screen.

Output:

If you wish to change the color of the back button on NavigationView, check out the link below.

Change the color of back button on NavigationView

Hide the navigation back button

Now, I will hide the back button that appears by default in the top left corner of the screen by applying the .navigationBarBackButtonHidden(true) on the Text view.

Example

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView {
            // Create a NavigationLink to navigate to anotherView
            NavigationLink("Nevigate to another view", destination: anotherView())
        }
    }
}

struct anotherView: View {
    var body: some View {
        // Display a text in another view
        Text("This is aother view")
            // Hide the default navigation back button in the navigation bar
            .navigationBarBackButtonHidden(true)
    }
}

The above code will display a navigation bar containing a link with the text “Navigate to another view“. When we click the link it will navigate us to the anotherView and display the text “This is another view” without the default back button in the navigation bar.

We can prevent users from navigating back to the previous view using this method.

Output: