# NavigationLink

[SwiftUI](https://lochiwei.gitbook.io/ios/swiftui) ⟩ [navigation](https://lochiwei.gitbook.io/ios/swiftui/view/navi) ⟩ NavigationLink

{% hint style="success" %}
A SwiftUI [built-in view](https://lochiwei.gitbook.io/ios/swiftui/term/built-in-view) that <mark style="color:yellow;">navigates to a</mark> [destination view](https://lochiwei.gitbook.io/ios/swiftui/view/hierarchy/destination-view) <mark style="color:yellow;">when tapped</mark> by a user.
{% endhint %}

{% hint style="danger" %} <mark style="color:purple;">NavigationLink</mark> <mark style="color:yellow;">only works inside</mark> a [NavigationStack](https://lochiwei.gitbook.io/ios/swiftui/view/navi/stack) or a [NavigationSplitView](https://lochiwei.gitbook.io/ios/swiftui/view/navi/split-view).
{% endhint %}

{% tabs %}
{% tab title="💾 程式" %}

```swift
// ⭐️ text label
NavigationLink("label") { 
    DestinationView()
        .navigationTitle("Destination View") 
}

// ⭐️ label (view builder)
NavigationLink(destination: DestinationView()) { 
    LabelView() 
}

// ⭐️ destination/label (view builder)
NavigationLink { 
    DestinationView() 
} label: { 
    LabelView() 
}
```

{% endtab %}

{% tab title="👥 相關" %}

* [stack](https://lochiwei.gitbook.io/ios/swiftui/view/navi/stack "mention")
* [split-view](https://lochiwei.gitbook.io/ios/swiftui/view/navi/split-view "mention")
  {% endtab %}

{% tab title="📘 手冊" %}

* [SwiftUI](https://developer.apple.com/documentation/swiftui) ⟩ [Navigation](https://developer.apple.com/documentation/swiftui/navigation) ⟩ [NavigationLink](https://developer.apple.com/documentation/swiftui/navigationlink/)
  {% endtab %}

{% tab title="📗 參考" %}

* Design+Code - [Navigation Link and URL](https://designcode.io/swiftui-ios15-navigation-link-url)
* Hacking with Swift - [What’s new in Swift 5.3?](https://www.hackingwithswift.com/articles/218/whats-new-in-swift-5-3) (multiple trailing closures)
* Sarunw - [tintColor in SwiftUI](https://sarunw.com/posts/tintcolor-in-swiftui/)
  {% endtab %}
  {% endtabs %}