How to implement navigation split view in SwiftUI

SwiftUI NavigationSplitView

Posted on 30 Nov 2023 . 1 min read

In SwiftUI, the NavigationView and SplitView allow you to create split-screen layouts, especially useful for iPad applications. The NavigationView helps manage navigation within a view hierarchy, while SplitView divides the screen into two or more panes, often used with a master-detail interface.

Here's a basic example demonstrating the use of NavigationView with SplitView:

import SwiftUI

struct MasterView: View {
    var body: some View {
        NavigationView {
            List {
                ForEach(1..<10) { index in
                    NavigationLink(destination: DetailView(item: index)) {
                        Text("Item \(index)")
            Text("Select an item")

struct DetailView: View {
    let item: Int
    var body: some View {
        Text("Detail for Item \(item)")

struct SplitApp: App {
    var body: some Scene {
        WindowGroup {
            #if os(iOS)
                .frame(minWidth: 800, minHeight: 600) // Set minimum size for iPad/macOS

In the above code:

  • MasterView presents a list of items using NavigationView and List. Tapping an item navigates to its detail view.

  • DetailView displays details of a selected item.

  • SplitApp is the entry point. For iPad or macOS, it shows a SplitView, otherwise, it displays only the MasterView.

The bottom line

Remember to adapt the layout and functionality to fit your specific app requirements. Additionally, handling navigation, adapting to different device sizes, and providing appropriate UI for both master and detail views might need further customization based on your application's needs.

Don’t hesitate to contact me if you have any questions or queries. Follow me on twitter @gurjitpt for any updates.


Share this article

Written By

Generic placeholder image

Gurjit Singh

I’m Computer Science graduate and an iOS Engineer who writes about Swift and iOS development. Follow me for more updates:

Discover articles by topics

SwiftUI Class Struct Networking XCode NSCache Enum Optionals Property Observers Closures Guard Reviews StoreKit App Store Algorithms Testing Operators Protocol Extensions Weak Unowned SwiftData WWDC23 GCD API Admob SwiftLint Lottie Foreach Objective-C UIKit NavigationSplitView

Related Articles

Deep Dive into Autorelease Pools in Swift

In the realm of software development, memory management plays a crucial role in ensuring the efficient allocation and deallocation of memory...

2024-01-28 . 4 min read     Swift Autorelease

Read More »

Swift enum equatable: with or without associated values

Swift enums provide a powerful way to model a set of related values. Enums can be equipped with associated values, allowing them to represen...

2024-01-24 . 3 min read     Swift Enums

Read More »

How to create Date Picker in SwiftUI

Use a DatePicker when creating a view that enables users to choose both a calendar date and, if needed, a specific time.In SwiftUI, you can ...

2024-01-16 . 2 min read     SwiftUI DatePicker

Read More »

Getting started with Swiftlint to enforce Swift style

SwiftLint is a tool that ensures Swift code adheres to defined style guidelines. It automates code review by identifying and suggesting impr...

2023-12-29 . 4 min read     Swift SwiftLint

Read More »

How to use Lottie animation in SwiftUI

Lottie is a fantastic tool for incorporating high-quality animations into your SwiftUI projects. There are several ways to add Lottie to pro...

2023-12-13 . 2 min read     SwiftUI Lottie

Read More »

How to get index in Foreach in SwiftUI

In SwiftUI, the ForEach is used to iterate over a collection of data and create views dynamically based on that data....

2023-12-07 . 3 min read     SwiftUI ForEach

Read More »