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.

Image of books
News from tanaschita.com: I'm now offering sponsorship
By publishing a new article on different iOS topics every week, tanaschita.com is constantly growing in the developer community and may provide a great audience for you as a sponsor. Click here to learn more.

Newsletter

Receive a monthly newsletter about the latest articles and tips.

Image of a reading marmot

Related tags

Written by

Articles with related topics

Latest articles and tips