Skip to main content
.navigationTitle(title: string): Component;

Parameters

title
string
The title text to display in the navigation bar.

Support

Usage

Basic navigation title

VStack([
    Text("Page content")
]).navigationTitle("Home")

Dynamic navigation title

VStack([
    Text("User profile information")
]).navigationTitle(userName)

Form with navigation title

const [name, setName] = useState("")
const [email, setEmail] = useState("")

Form([
    TextField({ placeholder: "Name", text: name, setText: setName }),
    TextField({ placeholder: "Email", text: email, setText: setEmail }),
    Button("Save", () => {})
]).navigationTitle("Edit Profile")

Detail view navigation

ScrollView([
    Image(article.image),
    Text(article.content)
]).navigationTitle(article.title)
VStack([
    Text(`${items.length} items`)
]).navigationTitle(items.isEmpty ? "No Items" : "My Items")

Settings screen

List([
    NavigationLink("Account", destination: AccountView()),
    NavigationLink("Privacy", destination: PrivacyView()),
    NavigationLink("About", destination: AboutView())
]).navigationTitle("Settings")

Search results

List([
    ForEach(searchResults, (result) =>
        NavigationLink(result.title, destination: DetailView(result))
    )
]).navigationTitle(`${searchResults.length} Results`)

Contextual titles

VStack([
    if (isEditing) {
        EditingInterface()
    } else {
        DisplayInterface()
    }
]).navigationTitle(isEditing ? "Edit Document" : "Document")