Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.metabind.ai/llms.txt

Use this file to discover all available pages before exploring further.

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. Programmatically presents a navigation destination view. 
.navigationDestination(props: {
    isPresented: boolean,
    setIsPresented: (value: boolean) => void,
    destination: () => Component
}): Component
​
props
object
required
Configuration for the navigation destination.
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.
Sets the navigation bar title. 
.navigationTitle(title: string): Component
​
title
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.
Hides the navigation bar back button. 
.navigationBarBackButtonHidden(isHidden?: boolean): Component
​
isHidden
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.
Sets the navigation bar title display mode. 
.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
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.

​
See also