Customizing the appearance of the NavigationView title in SwiftUI

Note: Starting with iOS 16, NavigationStack provides more robust navigation handling, such as support for deep linking, programmatic navigation, and improved management of state. While NavigationView remains available for backward compatibility, it's recommended to use NavigationStack for modern SwiftUI projects.

In this article, we'll look at how to customize the navigation title for NavigationView. 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 NavigationView in iOS shows a large title when it's expanded and switches to an inline title when scrolled. The following code example results in such default behaviour.

NavigationView {
    VStack {
        /// List...
    }
    .navigationTitle("Title")
}

SwiftUI provides 2 options to customize the appearance of the title:

• the navigationBarTitleDisplayMode(_:) modifier
• the toolbar(content:) modifier.

The navigationBarTitleDisplayMode(_:) modifier

By using the navigationBarTitleDisplayMode(_:) modifier and setting it to .inline disables the large title style. The title always stays within the standard bounds of the navigation bar.

var body: some View {
    NavigationView {
        VStack {
            // List...
        }
        .navigationTitle("Title")
        .navigationBarTitleDisplayMode(.inline)
    }
}

The toolbar(content:) modifier

In case we need a custom appearance of the title, we can use the toolbar(content:) modifier.

var body: some View {
    NavigationView {
        VStack {
            // List...
        }
        .navigationTitle("Title")
        .navigationBarTitleDisplayMode(.inline)
        .toolbar {
            ToolbarItem(placement: .principal) {
                Image(systemName: "photo.fill")
                    .foregroundColor(.green)
            }
        }
    }
}

We set a ToolbarItem of placement type .principal with the content we want to show as a title view. If a navigation bar title is also configured, it gets overridden by the toolbar item.

We can replace the Imageview from the example above with any type of SwiftUI view hierarchy.