How it works
NavigationBarItem describes the display characteristics of an item shown in a navigation bar, most notably the prominence of the bar's title. Its nested TitleDisplayMode type is the value you actually work with day to day: it tells SwiftUI whether a title should appear large and stacked beneath the bar, compact and centered inline, or follow the system's automatic choice. Reach for it through the navigationBarTitleDisplayMode(_:) modifier when you want to control how the title presents as content scrolls, rather than leaving the decision to the platform default.
Name the destination with navigationTitle(_:)
The title text is what NavigationBarItem's display mode governs, so you first establish it. Here
.navigationTitle("Mail")gives the list the string "Mail" that the bar will render; the display mode then decides how that string is laid out.Choose a TitleDisplayMode value
NavigationBarItem.TitleDisplayMode is an enumeration with three cases:
.automaticdefers to the context,.largerenders a prominent title beneath the bar, and.inlinerenders a compact title centered within the bar. The example selects.inlineto keep the "Mail" title small and on the bar itself.Apply it with navigationBarTitleDisplayMode(_:)
You don't construct a NavigationBarItem directly; you pass a TitleDisplayMode to the
.navigationBarTitleDisplayMode(.inline)modifier. Attaching it to theListsets the mode for that view's place in the navigation hierarchy, overriding whatever the default would have been.Let the enclosing NavigationStack honor the mode
The display mode only takes effect inside a navigation container that draws a bar. Because the
Listlives within aNavigationStack, that stack reads the requested.inlinemode and lays out the "Mail" title accordingly when it presents the bar.
.navigationBarTitleDisplayMode(.inline) to .navigationBarTitleDisplayMode(.large) and watch the "Mail" title shift from a compact centered label to a prominent heading stacked above the list.Example & preview
Press Run live & edit to compile it in your browser — then edit the Swift on the left and the preview re-renders live.
struct NavigationBarItemDemo: View {
var body: some View {
NavigationStack {
List {
Text("Inbox")
Text("Drafts")
Text("Sent")
}
.navigationTitle("Mail")
.navigationBarTitleDisplayMode(.inline)
}
}
}