Customizing SwiftUI Navigation Titles with ToolbarItem

SwiftUI's navigationTitle(_:) works well for most applications, but it has one significant limitation—you don't get much control over its appearance. The system always uses Apple's navigation title styles, making it impossible to apply your own typography, custom fonts, or branding.

If your app uses a custom design system, chances are you'll eventually want navigation titles that match the rest of your interface.

Fortunately, SwiftUI's toolbar APIs provide a flexible alternative.

In this article, you'll learn how to build fully customized navigation titles, center them, align them to the leading edge, and work around a few surprising behaviors introduced by the navigation bar.

The Limitation of navigationTitle

A standard navigation title is incredibly simple to add.

.navigationTitle("Share List")
.navigationBarTitleDisplayMode(.large)

This produces the familiar large navigation title used throughout iOS.

Switching to the inline style is just as easy.

.navigationTitle("Share List")
.navigationBarTitleDisplayMode(.inline)

While these styles look great, they always use Apple's typography. You can't apply your own font, weight, or branding.

If your application has a custom font family, this quickly becomes a limitation.

Replacing the Navigation Title

Instead of using navigationTitle, you can insert your own view into the navigation bar using ToolbarItem.

For a centered title, use the .principal placement.

.toolbar {
    ToolbarItem(placement: .principal) {
        Text("Share List")
            .font(.brand(.headline, weight: .semibold))
    }
}

The .principal placement tells SwiftUI that this view should occupy the primary title position.

Unlike navigationTitle, this can contain any SwiftUI view.

For example, you could even combine an icon with text.

ToolbarItem(placement: .principal) {
    HStack(spacing: 8) {
        Image(systemName: "square.and.arrow.up")

        Text("Share List")
            .font(.brand(.headline, weight: .semibold))
    }
}

Because the toolbar accepts arbitrary views, you're no longer limited to plain text.

The Mysterious Empty Space

The first time you try this, you'll probably notice an unexpected gap underneath the navigation bar.

Nothing in your layout caused it.

SwiftUI is still reserving space for a large navigation title, even though you've replaced the title entirely.

The fix is simply to force the navigation bar into inline mode.

.navigationBarTitleDisplayMode(.inline)
.toolbar {
    ToolbarItem(placement: .principal) {
        Text("Share List")
            .font(.brand(.headline, weight: .semibold))
    }
}

This tells SwiftUI not to reserve space for a large title.

The result is a clean navigation bar with your own custom typography.

Creating a Leading-Aligned Title

Sometimes a centered title isn't the desired design.

Many branded interfaces prefer the title aligned with the leading edge.

Your first instinct may be to change the placement.

.toolbar {
    ToolbarItem(placement: .topBarLeading) {
        Text("Share List")
            .font(.brand(.headline, weight: .semibold))
    }
}

Unfortunately, the result is probably not what you expected.

SwiftUI treats the toolbar item like a navigation control and may render it inside the toolbar's button styling.

Instead of plain text, it behaves like an interactive button.

Preventing Text Truncation

One improvement is preventing the title from collapsing.

.toolbar {
    ToolbarItem(placement: .topBarLeading) {
        Text("Share List")
            .font(.brand(.headline, weight: .semibold))
            .fixedSize()
    }
}

fixedSize() prevents SwiftUI from compressing the title into an ellipsis.

While this fixes truncation, the title may still appear inside the toolbar's visual button treatment.

iOS 26's Shared Toolbar Background

Starting with iOS 26, toolbar items can automatically receive the new Liquid Glass shared background.

This is ideal for toolbar buttons but not for a title that's intended to look like plain text.

Fortunately, SwiftUI provides a dedicated modifier.

.toolbar {
    if #available(iOS 26.0, *) {
        ToolbarItem(placement: .topBarLeading) {
            Text("Share List")
                .font(.brand(.headline, weight: .semibold))
                .fixedSize()
        }
        .sharedBackgroundVisibility(.hidden)
    } else {
        ToolbarItem(placement: .topBarLeading) {
            Text("Share List")
                .font(.brand(.headline, weight: .semibold))
                .fixedSize()
        }
    }
}

By hiding the shared background, the title is rendered as plain text instead of appearing inside the Liquid Glass capsule.

This preserves your branding while still using SwiftUI's navigation system.

Building a Reusable Custom Title

If multiple screens use the same styling, you can avoid duplicating the toolbar code by creating a reusable modifier.

struct BrandNavigationTitle: ViewModifier {

    let title: String
    let placement: ToolbarItemPlacement

    func body(content: Content) -> some View {
        content
            .navigationBarTitleDisplayMode(.inline)
            .toolbar {
                if #available(iOS 26.0, *) {
                    ToolbarItem(placement: placement) {
                        Text(title)
                            .font(.brand(.headline, weight: .semibold))
                            .fixedSize()
                    }
                    .sharedBackgroundVisibility(.hidden)
                } else {
                    ToolbarItem(placement: placement) {
                        Text(title)
                            .font(.brand(.headline, weight: .semibold))
                            .fixedSize()
                    }
                }
            }
    }
}

Adding a convenience extension makes it easy to apply anywhere.

extension View {

    func brandNavigationTitle(
        _ title: String,
        placement: ToolbarItemPlacement = .principal
    ) -> some View {
        modifier(
            BrandNavigationTitle(
                title: title,
                placement: placement
            )
        )
    }
}

Now any screen can opt into your branded navigation title with a single modifier.

NavigationStack {
    ShareListView()
        .brandNavigationTitle("Share List")
}

Or use a leading-aligned title.

NavigationStack {
    ShareListView()
        .brandNavigationTitle(
            "Share List",
            placement: .topBarLeading
        )
}

When Should You Use This?

Custom toolbar titles work particularly well for:

• Apps with branded typography.

• Sheets and modal presentations.

• Marketing or consumer-facing applications.

• Screens that include logos or custom title layouts.

• Navigation bars containing multiple views such as badges or status indicators.

For standard push navigation, Apple's built-in navigationTitle remains the better choice. It automatically supports Dynamic Type, adapts to platform conventions, and behaves consistently across iPhone, iPad, and macOS.

Reserve custom toolbar titles for places where your design genuinely benefits from additional flexibility.

Summary

SwiftUI's navigationTitle provides an excellent default experience, but it intentionally limits customization. By placing your own view inside a ToolbarItem, you gain complete control over typography, layout, and branding.

The .principal placement is ideal for centered titles, while .topBarLeading lets you create branded leading-aligned headers. Just remember to use .navigationBarTitleDisplayMode(.inline) to eliminate unwanted large-title spacing, and on iOS 26 hide the shared toolbar background with .sharedBackgroundVisibility(.hidden) when you want your title to appear as plain text instead of inside the Liquid Glass capsule.

With these techniques, you can build navigation bars that match your design system without abandoning SwiftUI's navigation infrastructure.

Thank you for reading. If you found this article helpful and would like to support our work, visit DevTechie.com for in-depth SwiftUI, iOS, and Apple development courses designed to help you build real-world applications and stay current with the latest Apple technologies.

Happy coding, and I'll see you in the next article.