Creating a Sidebar Navigation for iOS, iPadOS, and macOS: A SwiftUI Tutorial

In this tutorial, you will learn how to create a sidebar navigation for iOS, iPadOS, and macOS using SwiftUI. A sidebar navigation provides users with an intuitive way to navigate through an app's content by displaying a list of items in a sidebar that can be expanded or collapsed.

You will start by creating a simple SwiftUI project and adding a sidebar view to the main view. Then you will learn how to populate the sidebar with data and how to navigate between views using a navigation view.

By the end of this tutorial, you will have a fully functional sidebar navigation for your iOS, iPadOS, or macOS app that will enhance the user experience and make navigation easier and more intuitive.

Learn how to create a Sidebar navigation for iOS, iPadOS and macOS

The sidebar allows you to utilize the larger screen of the iPad and macOS. 

• It's also a common navigation interface seen on websites. It consists of a menu that is situated on the left side of the screen. 
• Just like the Tab Bar, it navigates the main content.

Sidebar

• The Sidebar is a List that is embeded inside a Navigation View. 
• You can customize the title and the layout will automatically adapt to the iPhone and iPad in portrait and landscape modes.

NavigationView {
    List {
        Label("Courses 1", systemImage: "book")
        Label("Courses 2", systemImage: "book")
    }
    .navigationTitle("Learn") // toolbar title
}

..

Initial Screen and Title

To set your initial screen, you'll need to declare your View after the List.

NavigationView {
		// List
		CourseView()
}

..

A Navigation Title is set inside that View.

struct CourseView: View {
    var body: some View {
        Text("Courses")
            .navigationTitle("Courses")
    }
}

..

Navigation Link

To allow navigation, you'll need to set a NavigationLink for each List item.

NavigationLink(destination: CourseView()) {
		Label("Courses", systemImage: "book")
}

..

Portrait and Landscape Modes

The Sidebar menu will adapt in 3 ways between iPhones and iPads:

• Shows List items that navigate to content (all iPhones except Pro Max in landscape).

• Shows content with a top left Menu (iPad in portrait or iPhone Pro Max in landscape).

• Shows Sidebar and content next to each other (iPad in landscape). In this mode, you can toggle to show or hide the Sidebar using the Navigation Bar.