How to create a custom reusable toolbar in SwiftUI

When building navigation bars and toolbars in SwiftUI, we'll often want to keep the same look and functionality across multiple screens. Instead of copying and pasting the same toolbar code everywhere, we can abstract the toolbar into a reusable component.

SwiftUI's ToolbarContent protocol is perfect to do that. In this guide, we'll create a custom reusable toolbar, apply it via a ViewModifier, and add a convenient view extension for a one-line API.

Architecture & Design Patterns for iOS

This book is a practical guide to essential architectural principles and design patterns for iOS development. It covers strategies for building maintainable apps with Swift and SwiftUI, including dependency injection, navigation, common patterns, and modularization.

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")