NavigationLink in iOS Swift

Introduction

NavigationLink helps you move from one screen to another in your app. It makes it easy to show new pages when users tap on something.

When you want to open a detail page after tapping a list item.

When you want to move from a home screen to a settings screen.

When you want to show more information after a button tap.

When you want to create a multi-step form with different screens.

Syntax

iOS Swift

NavigationLink(destination: DestinationView()) {
    Text("Tap me")
}

The destination is the new screen you want to show.

The closure after destination is the view that users tap to navigate.

Examples

This creates a link that shows a simple text screen when tapped.

iOS Swift

NavigationLink(destination: Text("Hello, World!")) {
    Text("Go to Greeting")
}

This uses an icon as the tappable item to open a detail screen.

iOS Swift

NavigationLink(destination: DetailView()) {
    Image(systemName: "star")
}

This combines an image and text inside the tappable area.

iOS Swift

NavigationLink(destination: ProfileView()) {
    VStack {
        Image("profilePic")
        Text("View Profile")
    }
}

Sample App

This app shows a home screen with a blue button. When you tap it, you go to a new screen with a welcome message. The navigation bar shows the title "Home" on the first screen.

iOS Swift

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView {
            VStack {
                NavigationLink(destination: Text("Welcome to the second screen!")) {
                    Text("Go to Second Screen")
                        .padding()
                        .background(Color.blue)
                        .foregroundColor(.white)
                        .cornerRadius(8)
                }
            }
            .navigationTitle("Home")
        }
    }
}

@main
struct MyApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

Important Notes

Always wrap NavigationLink inside a NavigationView to enable navigation features.

You can customize the tappable content with any view, not just text.

NavigationLink automatically adds the arrow icon on the right side to show it is tappable.

Summary

NavigationLink creates tappable items that open new screens.

Use NavigationView to enable navigation in your app.

You can use text, images, or any view as the link content.