Skip to main content
.navigationDestination(props: { isPresented: boolean, setIsPresented: (value: boolean) => void, destination: () => Component }): Component;

​
Parameters

​
props
object
Configuration object for programmatic navigation.
​
props.isPresented
boolean
Boolean state controlling whether the destination view is presented.
​
props.setIsPresented
(value: boolean) => void
Function to update the presentation state.
​
props.destination
() => Component
Function that returns the destination view to present.

​
Support

​
Overview

Use navigationDestination to enable programmatic navigation by presenting a destination view when the isPresented state becomes true. This is useful for navigation that isn’t triggered by a NavigationLink, such as navigation in response to async operations, state changes, or user actions other than tapping a link.

​
Usage

​
Basic programmatic navigation

const [showDetails, setShowDetails] = useState(false);

NavigationStack([
    VStack([
        Text("Main Content"),
        Button("Show Details", () => {
            setShowDetails(true);
        })
    ])
    .navigationTitle("Home")
    .navigationDestination({
        isPresented: showDetails,
        setIsPresented: setShowDetails,
        destination: () => 
            VStack([
                Text("Detail View"),
                Button("Go Back", () => {
                    setShowDetails(false);
                })
            ])
            .navigationTitle("Details")
    })
])

const [showResult, setShowResult] = useState(false);
const [result, setResult] = useState(null);

NavigationStack([
    VStack([
        Button("Fetch Data", async () => {
            const data = await fetchData();
            setResult(data);
            setShowResult(true);
        })
    ])
    .navigationDestination({
        isPresented: showResult,
        setIsPresented: setShowResult,
        destination: () => ResultView({ data: result })
    })
])

​
Full screen destination

const [isPresented, setIsPresented] = useState(false);

VStack([
    Button("Show Fullscreen", () => {
        setIsPresented(true);
    })
])
.navigationDestination({
    isPresented,
    setIsPresented,
    destination: () => 
        Rectangle()
            .fill(Color("green"))
            .ignoresSafeArea()
})

​
Conditional navigation based on state

const [isLoggedIn, setIsLoggedIn] = useState(false);
const [showProfile, setShowProfile] = useState(false);

NavigationStack([
    VStack([
        Button("View Profile", () => {
            if (isLoggedIn) {
                setShowProfile(true);
            } else {
                // Show login flow instead
            }
        })
    ])
    .navigationDestination({
        isPresented: showProfile,
        setIsPresented: setShowProfile,
        destination: () => ProfileView()
    })
])

​
See Also