Logo for tanaschita.com

How to create a custom reusable toolbar in SwiftUI

Learn how to abstract a SwiftUI toolbar into a component.

03 Jul 2023 · 2 min read

When creating a toolbar in SwiftUI, we may need to reuse it in multiple screens. To avoid code duplication, we can use SwiftUI's ToolbarContent type to abstract the toolbar into its own component.

Let's look at how to do that.

Sponsorship logo
Preparing for a technical iOS job interview - updated for iOS 17
Check out my book on preparing for a technical iOS job interview with over 200 questions & answers. Test your knowledge on iOS topics such as Swift, SwiftUI, Combine, HTTP Networking, Authentication, SwiftData & Core Data, Concurrency with async/await, Security, Automated Testing, Machine Learning and more.
LEARN MORE

The following example creates a navigation bar with a custom back button and a title:

struct SomeCustomToolBarContent: ToolbarContent {
let title: String
@Environment(\.presentationMode) var presentationMode
var body: some ToolbarContent {
ToolbarItemGroup(placement: .navigationBarLeading) {
Button(action: {
presentationMode.wrappedValue.dismiss()
}) {
Image("someCustomBackButtonImage")
}
}
ToolbarItem(placement: .principal) {
Text(title)
.font(titleFont)
.foregroundColor(titleColor)
}
}
}

To use it, we can use SwiftUI's toolbar modifier as follows:

someView
.toolbar {
SomeCustomToolBarContent(title: "SomeTitle")
}
.navigationBarBackButtonHidden(true)
.navigationBarShadow()

We can go a step further to add even more abstraction by creating a custom view modifier:

struct SomeCustomToolBarModifier: ViewModifier {
let title: String
func body(content: Content) -> some View {
return content
.toolbar {
SomeCustomToolBarContent(title: title)
}
.navigationBarBackButtonHidden(true)
.navigationBarShadow()
}
}

With that in place, we can now apply the toolbar as follows:

someView
.modifier(SomeCustomToolBarModifier(title: "SomeTitle"))

To make the call above even shorter, we could additionally create a View extension:

extension View {
func someCustomToolbar(title: String) -> some View {
return self.modifier(SomeCustomToolBarModifier(title: title))
}
}

Now, we are able to apply the toolbar with the following call:

someView
.someCustomToolbar(title: "SomeTitle")
Sponsorship logo
Preparing for a technical iOS job interview - updated for iOS 17
Check out my book on preparing for a technical iOS job interview with over 200 questions & answers. Test your knowledge on iOS topics such as Swift, SwiftUI, Combine, HTTP Networking, Authentication, SwiftData & Core Data, Concurrency with async/await, Security, Automated Testing, Machine Learning and more.
LEARN MORE

Newsletter

Image of a reading marmot
Subscribe

Like to support my work?

Say hi

Related tags

Articles with related topics

swiftui

swift

ios

How to use NavigationPath for routing in SwiftUI

Learn how to manage navigation in SwiftUI programmatically.

09 Jun 2024 · 5 min read

Latest articles and tips

© 2024 tanaschita.com

Privacy policy

Impressum