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.

Comments

Popular posts from this blog

Creating Beautiful Card UI in Flutter

Jetpack Compose - Card View