How to remove Back button title in SwiftUI

In iOS 14, UIKit got a new way to remove a back button title using backButtonDisplayMode = .minimal.

I have covered how to do it here.

In iOS 16, we get a native way to do the same in SwiftUI.

In this article, we will learn how to remove the back button title in SwiftUI.

How to remove Back button title in SwiftUI

To remove a back button title in SwiftUI, we need to use a new modifier, toolbarRole(_:).

toolbarRole(_:) is a modifier that configures the role of a toolbar.

By setting a role, you give a clue to SwiftUI on what you want from the toolbar.

Based on the role, SwiftUI will rearrange the toolbar's items to fit the needs. This will affect the position of the toolbar's items and how they are rendered.

To make a back button title disappear, we need to set a toolbar role to editor, .toolbarRole(.editor).

struct ContentView: View {
    var body: some View {
        NavigationStack {
            List {
                NavigationLink("Detail") {
                    DetailView()
                        .toolbarRole(.editor)
                }
            }
            .navigationTitle("Home")
        }
    }
}

The back button title will be removed on a view that applies .toolbarRole(.editor). In this case, DetailView.

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

Note Taking:Quickly take note using Voice, Camera, or Typing

Try it for Free

When should you remove the back button title

By default, a back button in a navigation view will show along with a title of the previous view.

This title gives a clue about the screen we came from. It allows users to keep track of and maintain awareness of their locations within apps.

Here is an example of a DetailView. Users know at a glance that they can go back to the "Home" view.

In my opinion, it does more harm than good to remove the title. Most of the time, we trade this usability for clean design.

Not all navigation bars are created equals

But not all navigation bars are created equals.

As a platform evolve, a navigation bar needs to support various application.

Some apps might not use a navigation bar for navigating, but for editing.

By telling SwiftUI the purpose of a navigation bar via .toolbarRole, SwiftUI can make a navigation bar more suitable for the job.

In this case, SwiftUI decided that the editing function (.toolbarRole(.editor)) needs more space for actions.

That's why the back title gets removed. We trade the title for a bigger space.