Skip to main content
.navigationDestination(props: {
    isPresented: boolean,
    setIsPresented: (value: boolean) => void,
    destination: () => Component
}): Component
​
props
object
required
Configuration for the navigation destination.

​
Support

​
Usage

​
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 ?? "")
    })
}

​
Notes

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

​
See Also