Custom Back button in SwiftUI

When talking about a custom Back button in a navigation view, it usually falls into two categories.

Custom appearance.
Custom action.

If you want to customize a back button action, you can read it in Custom Back button Action in SwiftUI.

In this article, we will focus on a custom Back button appearance.

How we customize an appearance of a back button varies based on the area we want the customization to take effect.

I categorize this into two groups.

You can easily support sarunw.com by checking out this sponsor.

Build, manage, and grow in-app purchases: Glassfy's SDK makes it simple to build in-app subscriptions or one-time purchases. Glassfy offloads managing backend infrastructure and building paywalls so that you can focus on better monetizing your app or other tasks.

Build for Free

Sponsor sarunw.com and reach thousands of iOS developers.

How to change a back button across the app

At the moment (iOS 16), SwiftUI has no native way to change the appearance of the back button.

Your best bet is to fall back to UIKit.

I wrote a detailed article about this in How to change a back button image.

Here is a snippet of how to do it.

UINavigationBar.appearance().backIndicatorImage = UIImage(systemName: "arrow.backward")
UINavigationBar.appearance().backIndicatorTransitionMaskImage = UIImage(systemName: "arrow.backward")

You call this at the earliest stage possible. It can be in the AppDelegate or onAppear of your root view.

@main
struct custom_back_buttonApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
                .onAppear {
                    UINavigationBar.appearance().backIndicatorImage = UIImage(systemName: "arrow.backward")
                    UINavigationBar.appearance().backIndicatorTransitionMaskImage = UIImage(systemName: "arrow.backward")
                }
        }
    }
}

Here is the result. We change the back button image to UIImage(systemName: "arrow.backward").

A custom back button image.

You can easily support sarunw.com by checking out this sponsor.

Build for Free

Sponsor sarunw.com and reach thousands of iOS developers.

How to change a back button on a specific view

If you want to change the back button appearance of a specific view, we can use the same way we did in Custom Back button Action in SwiftUI.

That is to opt out of the default back button and recreate it.

Remove the default Back button

To remove the default back button, you apply .navigationBarBackButtonHidden(true) to the view that you want to hide the back button.

In the following example, when the DetailView get pushed to a navigation stack. It won't have a back button.

struct DetailView: View {
    var body: some View {
        Text("Detail View")
            .navigationTitle("Detail Title")
            .navigationBarBackButtonHidden(true)            
    }
}

Once you hide the default back button, all the functionality is gone.

Tapping on your custom back button won't pop the view out of a navigation stack.
Swiping from the leading edge of the screen is also disabled.

So, you need to implement the dismissal logic manually in your new button.

Recreate a Back button

A back button is just a button. We need to create a normal button and position it in the same place.

We can do that with a help of toolbar(content:) and ToolbarItem(placement: .navigationBarLeading).

struct DetailView: View {
    @Environment(\.dismiss) private var dismiss

var body: some View {
        Text("Detail View")
            .navigationTitle("Detail Title")
            .navigationBarBackButtonHidden(true)            
            // 1
            .toolbar {
                // 2
                ToolbarItem(placement: .navigationBarLeading) {
                    Button {
                        // 3
                        dismiss()
                    } label: {
                        // 4
                        HStack {
                            Image(systemName: "arrow.backward")
                            Text("Custom Back")
                        }
                    }
                }
            }
    }
}

1 We use toolbar(content:) to add a new toolbar item.
2 We position this to .navigationBarLeading, the same position as the default back button.
3 We have to manually pop dimiss the view here.
4 This is where we customize the appearance of a back button.

Here is the result.

A custom back button appearance.

Custom Back button in SwiftUI