Skip to main content
.navigationBarTitleDisplayMode(mode: "large" | "inline" | "automatic"): Component
​
mode
string
required
The title display mode:
  • "large" — a large, scrollable title that collapses as the user scrolls
  • "inline" — a small, centered title in the navigation bar
  • "automatic" — inherits the display mode from the navigation context

​
Support

​
Usage

​
Large title

ScrollView([
    VStack([
        ForEach(items, (item) => Text(item.name))
    ])
])
    .navigationTitle("Settings")
    .navigationBarTitleDisplayMode("large")

​
Inline title

VStack([
    Text("Detail content")
])
    .navigationTitle("Item Details")
    .navigationBarTitleDisplayMode("inline")

​
Notes

  • The "large" mode shows a prominent title that smoothly transitions to an inline title as the user scrolls down. This is the default for root-level views in a navigation stack.
  • The "inline" mode always shows a compact title centered in the navigation bar. This is typical for detail/pushed views.
  • This modifier is applied to content within a NavigationStack.

​
See Also