How to add a sidebar for iPadOS

Paul Hudson @twostraws September 3rd 2021

Updated for Xcode 14.0 beta 1

New in iOS 14

In iPadOS it’s possible to show not only a regular split view controller, but also to add a sidebar that can be shown with a button tap. In SwiftUI we accomplish this by adding a third view to a NavigationView, like this:

struct ContentView: View {
    var body: some View {
        NavigationView {
            Text("Sidebar")
            Text("Primary View")
            Text("Detail View")
        }
    }
}

Download this as an Xcode project

SwiftUI will automatically take care of showing a button to slide in your bar from the side of the screen, and also collapse it with your primary view if you’re in a compact size class.

If you’re presenting a list inside your sidebar, it’s a good idea to use the .listStyle() to give it the system-standard theme for sidebars, like this:

struct ContentView: View {
    var body: some View {
        List(1..<100) { i in
            Text("Row \(i)")
        }
        .listStyle(.sidebar)
    }
}

Download this as an Xcode project

A list of rows with no separators and a gray background.