Skip to main content
NavigationLink(props: { destination: () => Component; label: Component }): Component;
NavigationLink(label: string, destination: () => Component): Component;
NavigationLink(label: Component, destination: () => Component): Component;
​
label
string | Component
required
The link’s visible content. Can be a plain string or any component.
​
destination
() => Component
required
A function that returns the view to navigate to when tapped. Must be inside a NavigationStack.
When using the object form:
​
props.destination
() => Component
required
A function that returns the destination view.
​
props.label
Component
required
A component to use as the link label.

​
Support

​
Usage

​
Simple string label

NavigationStack([
    NavigationLink("View Details", () =>
        Text("Detail content")
            .navigationTitle("Details")
    )
])

​
Component label

NavigationLink(
    Label({ title: "Settings", systemImage: "gear" }),
    () => SettingsView()
)

​
Object form

NavigationLink({
    destination: () =>
        VStack([
            Text("Profile Details")
        ])
            .navigationTitle("Profile"),
    label: HStack({ spacing: 12 }, [
        Image({ systemName: "person.circle" }),
        Text("View Profile")
    ])
})

NavigationStack([
    List([
        NavigationLink("Messages", () => MessagesView()),
        NavigationLink("Calendar", () => CalendarView()),
        NavigationLink("Settings", () => SettingsView()),
    ])
        .navigationTitle("Home")
])

​
See Also