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.
0
Would love your thoughts, please comment.x
()
x