Skip to main content
.navigationTitle(title: string): Component
title
string
required
The text to display in the navigation bar.

Support

Usage

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

Notes

  • 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.

See Also