Logo for tanaschita.com

Customizing the appearance of the NavigationView title in SwiftUI

Learn how to create a custom navigation bar title view in SwiftUI.

16 May 2022 · 2 min read

The default NavigationView in iOS shows a large title when it's expanded and switches to an inline title when scrolled.

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

The code example above results in such default behaviour.

Basic NavigationView
The default NavigationView title in expanded and inline state

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

The navigationBarTitleDisplayMode(_:) modifier

By using the navigationBarTitleDisplayMode(_:) modifier and setting it to .inline, the large title is never shown. 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(colorScheme.primaryColor)
}
}
}
}

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.

Custom title view
Custom title view

We could replace the image from the example above with any type of SwiftUI view hierarchy.

To dive deeper into the toolbar approach, check out the quick quide on toolbars for SwiftUI.

Newsletter

Like to support my work?

Say hi

Related tags

Articles with related topics

Latest articles and tips