Customizing the appearance of the NavigationStack title in SwiftUI

When working with NavigationStack, we have the possibility to customize the appearance of the navigation bar, including the title. This article explores two approaches to creating custom titles using SwiftUI’s navigationBarTitleDisplayMode(_:) and toolbar(content:) modifiers.

Let's jump in.

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 Default Title Behavior

In NavigationStack, a title is displayed when the navigationTitle(_:) modifier is used. By default, the system employs a large title that transitions to an inline title when scrolling:

NavigationStack {
    VStack {
        // Content...
    }
    .navigationTitle("Inline Title")
}

If we want to move beyond the default behavior, we can use the following customization techniques.

Customizing with navigationBarTitleDisplayMode(_:)

The navigationBarTitleDisplayMode(_:) modifier lets us control how the navigation title appears. Setting the mode to .inline ensures that the title remains compact and inline at all times, even when scrolling. This creates a consistent look across the app, particularly for minimalistic designs.

NavigationStack {
    VStack {
        // Content...
    }
    .navigationTitle("Inline Title")
    .navigationBarTitleDisplayMode(.inline)
}

Adding Custom Title Views with toolbar(content:)

To fully customize the appearance of the navigation title, the toolbar(content:) modifier allows replacing the default title with any SwiftUI view. By specifying a ToolbarItem with a placement of .principal, we can override the default title and insert completely custom layouts:

NavigationStack {
    VStack {
        // Content...
    }
    .navigationTitle("Custom Title")
    .navigationBarTitleDisplayMode(.inline)
    .toolbar {
        ToolbarItem(placement: .principal) {
            Image(systemName: "photo.fill")
                .font(.title)
                .foregroundColor(.blue)
        }
    }
}

Instead of an Image, we can use any SwiftUI view.