TechnologiesSwiftUI

ToolbarTitleDisplayMode struct

iOSmacOStvOSwatchOSvisionOSiOS 17.0+✓ renders

A type that defines the behavior of title of a toolbar.

How it works

ToolbarTitleDisplayMode is the type that describes how a navigation bar presents its title — whether the title appears large and prominent, condensed inline next to the bar's controls, or sized automatically by the platform. It gives you explicit control over a placement decision that SwiftUI otherwise makes for you based on context and scroll position. Reach for it when a screen needs a title style that differs from the default — for example, keeping a title compact even at the top of a scrollable list, or forcing a large treatment where the system would collapse it.

  1. Provide a title for the bar with navigationTitle(_:)

    ToolbarTitleDisplayMode only has meaning once there is a title to display, so the view first declares one. Here .navigationTitle("Mail") supplies the string that the toolbar will render, and the display mode then governs how that string is laid out.

  2. Apply the mode with toolbarTitleDisplayMode(_:)

    The toolbarTitleDisplayMode(_:) modifier is how you attach a ToolbarTitleDisplayMode to the surrounding navigation hierarchy. In the example it is placed on the List inside a NavigationStack, setting the policy for that destination's title.

  3. Choose a presentation case

    ToolbarTitleDisplayMode exposes its values as static members you pass to the modifier: .automatic defers to the platform, .large keeps the title big, and .inline keeps it condensed in the bar. The example selects .inlineLarge, a hybrid that shows the title inline while preserving the visual weight of the large style.

  4. Scope the mode to a navigation container

    Because the modifier reads from the navigation environment, ToolbarTitleDisplayMode takes effect within the enclosing NavigationStack (or NavigationSplitView). Attaching it to the content of the stack, as the demo does on the List, applies the chosen mode to that screen's title rather than globally.

Try it — Change .toolbarTitleDisplayMode(.inlineLarge) to .toolbarTitleDisplayMode(.inline) and then .large to watch the "Mail" title shift between a condensed bar title and a full large title.

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.

ToolbarTitleDisplayMode.swift
struct ToolbarTitleDisplayModeDemo: View {
    var body: some View {
        NavigationStack {
            List {
                Text("Inbox")
                Text("Sent")
                Text("Drafts")
            }
            .navigationTitle("Mail")
            .toolbarTitleDisplayMode(.inlineLarge)
        }
    }
}
Live preview
Inbox Sent Drafts 9:41 Mail
Inbox Sent Drafts 9:41 Mail
swift → lexer → parser → sema → uiir → canvas Open in Studio ↗
What's new in SwiftUI 27 →