Navigation chrome

These iOS-only modifiers configure the navigation chrome around content inside a NavigationStack. Use navigationDestination for programmatic pushes, navigationTitle to set the title text, and the navigationBar* modifiers to fine-tune title size and back button visibility. All four modifiers are typically applied to the content inside a NavigationStack — either the root view or a pushed destination view.

navigationDestination

Programmatically presents a navigation destination view.

.navigationDestination(props: {
    isPresented: boolean,
    setIsPresented: (value: boolean) => void,
    destination: () => Component
}): Component

object

required

Configuration for the navigation destination.

Show properties

boolean

required

Whether the destination view is currently pushed onto the navigation stack.

(value: boolean) => void

required

Callback to update the presented state. Called with false when the user navigates back.

() => Component

required

A function returning the component to push onto the navigation stack.

Programmatic navigation

const body = () => {
    const [showDetail, setShowDetail] = useState(false)

    return VStack([
        Button("Show Details", () => setShowDetail(true))
    ]).navigationDestination({
        isPresented: showDetail,
        setIsPresented: setShowDetail,
        destination: () => VStack([
            Text("Detail View")
                .font("title")
        ]).navigationTitle("Details")
    })
}

Conditional navigation based on data

const body = () => {
    const [selectedItem, setSelectedItem] = useState(null)

    return VStack([
        ForEach(items, (item) =>
            Button(item.name, () => setSelectedItem(item))
        )
    ]).navigationDestination({
        isPresented: selectedItem !== null,
        setIsPresented: (presented) => {
            if (!presented) setSelectedItem(null)
        },
        destination: () => Text(selectedItem?.name ?? "")
            .navigationTitle(selectedItem?.name ?? "")
    })
}

This modifier provides programmatic control over navigation, as opposed to NavigationLink which navigates on tap. The destination view is pushed onto the NavigationStack; when the user taps the back button, setIsPresented is called with false.

navigationTitle

Sets the navigation bar title.

.navigationTitle(title: string): Component

string

required

The text to display in the navigation bar.

Setting a page title

VStack([
    Text("Welcome to the app")
]).navigationTitle("Home")

With large title display mode

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

On a detail view

const body = () => {
    const [showDetail, setShowDetail] = useState(false)

    return NavigationStack([
        VStack([
            NavigationLink("Go to Details", () =>
                Text("Detail content")
                    .navigationTitle("Details")
                    .navigationBarTitleDisplayMode("inline")
            )
        ]).navigationTitle("Home")
    ])
}

This modifier must be used within a NavigationStack to have a visible effect. The title appears in the navigation bar and is also used as the back button label when a child view is pushed.

navigationBarBackButtonHidden

Hides the navigation bar back button.

.navigationBarBackButtonHidden(isHidden?: boolean): Component

boolean

default:"true"

Whether the back button is hidden. Defaults to true.

Hiding the back button

VStack([
    Text("Custom Detail View")
]).navigationBarBackButtonHidden()

With a custom back action When hiding the default back button, provide an alternative navigation method using a toolbar item.

const body = () => {
    const [showDetail, setShowDetail] = useState(false)

    return VStack([
        Text("Detail Content")
    ])
        .navigationBarBackButtonHidden()
        .toolbar(
            ToolbarItem("navigationBarLeading",
                Button("Close", () => setShowDetail(false))
            )
        )
}

This modifier is typically applied to a destination view within a NavigationStack. When hiding the back button, consider providing an alternative way for the user to navigate back.

navigationBarTitleDisplayMode

Sets the navigation bar title display mode.

.navigationBarTitleDisplayMode(mode: "large" | "inline" | "automatic"): Component

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

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")

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

Introduction

Authoring

Components

Components — iOS Extensions

Components — Web Extensions

Modifiers

Modifiers — iOS Extensions

Hooks and Globals

Styles

Types

Navigation chrome

navigationDestination

navigationTitle

navigationBarBackButtonHidden

navigationBarTitleDisplayMode

See also

​navigationDestination

​navigationTitle

​navigationBarBackButtonHidden

​navigationBarTitleDisplayMode

​See also

navigationDestination

navigationTitle

navigationBarBackButtonHidden

navigationBarTitleDisplayMode

See also