How to remove Back button title in SwiftUI
Table of Contents
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.
Debug 10x faster with Proxyman: Your ultimate tool to capture HTTPs requests/ responses, natively built for your iPhone and macOS. Special deal for Black Friday: Get 30% off for all Proxyman licenses with code “BLACKFRIDAY2024”.
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.
Read more article about SwiftUI, Back Button, or see all available topic
Enjoy the read?
If you enjoy this article, you can subscribe to the weekly newsletter.
Every Friday, you'll get a quick recap of all articles and tips posted on this site. No strings attached. Unsubscribe anytime.
Feel free to follow me on Twitter and ask your questions related to this post. Thanks for reading and see you next time.
If you enjoy my writing, please check out my Patreon https://www.patreon.com/sarunw and become my supporter. Sharing the article is also greatly appreciated.
Become a patron Buy me a coffee Tweet ShareHow to fix "No exact matches in call to initializer" error in Swift
This error can happen in many places. Based on the message, it might not be obvious what is causing it and how to solve it. Let's learn how to fix it.