Skip to main content
NavigationLink(props: { destination: () => Component, label: Component }): Component;
NavigationLink(label: string, destination: () => Component): Component;
NavigationLink(label: Component, destination: () => Component): Component;

​
Parameters

​
label
string | Component
The link’s label. Can be a string or any component.
​
destination
() => Component
A function that returns the view to present when the link is activated.
​
props
{destination: () => Component, label: Component}
Configuration object with destination and label properties.

​
Support

​
Overview

Use NavigationLink to present a destination view when a user taps or clicks the link. NavigationLink works within a NavigationStack to provide hierarchical navigation.

​
Usage

​
Simple string label

NavigationStack([
    VStack([
        NavigationLink("View Details", () => 
            VStack([
                Text("Detail View"),
                Text("This is the detail content")
            ])
            .navigationTitle("Details")
        )
    ])
    .navigationTitle("Home")
])

​
Component label

NavigationStack([
    VStack([
        NavigationLink(
            Label({ title: "Settings", systemImage: "gear" }),
            () => SettingsView()
        )
    ])
    .navigationTitle("Home")
])

​
Object form with custom label

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

​
With button style

NavigationStack([
    VStack([
        NavigationLink({
            destination: () => Rectangle().fill(Color("blue")),
            label: Text("Navigate")
        })
        .buttonStyle("plain")
    ])
])

NavigationStack([
    List([
        ForEach(items, (item) =>
            NavigationLink(item.title, () =>
                ItemDetailView({ item })
            )
        )
    ])
    .navigationTitle("Items")
])

​
See Also