JLV
Learn how to create a Sidebar navigation for iOS, iPadOS and macOS! SwiftUI Tutorial!

Location

Total Floor Area

Design

Program

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.

Downloads

To follow this tutorial, you can download the source file, which will help you compare your progress.

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", systemImage: "book")
        Label("Tutorials", systemImage: "square")
    }
    .navigationTitle("Learn")
}

Initial Screen and Title

To set your initial screen, you’ll need to declare your View after the List.
NavigationView {
		// List

		HomeView()
}
A Navigation Title is set inside that View.
struct HomeView: 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: HomeView()) {
		Label("Courses", systemImage: "book")
}

Portrait and Landscape Modes

The Sidebar menu will adapt in 3 ways between iPhones and iPads:
  1. Shows List items that navigate to content (all iPhones except Pro Max in landscape).
  2. Shows content with a top left Menu (iPad in portrait or iPhone Pro Max in landscape).
  3. 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.
More Projects