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: