Posted onOct 21, 2021

How Sidebar works on iPad with SwiftUI

Starting with iPadOS 14, Apple has redesigned the iPad sidebar by making it easier to navigate within an app. They are explaining that in theHuman Interface Guidelines. They are already using that in apps such as Photos, Files, Notes, Calendar, and more. This time let's check out how we can build a sidebar for iPad using SwiftUI. Currently, sidebar element is available only for iPads in landscape mode.

Creating a Sidebar

To create a sidebar for the iPad with SwiftUI, we need to create aList view where we would have all the sections and wrap it in aNavigationView. In the list we need to add aLabel element for each section.

The most crucial step here is to tell SwiftUI that the list should be rendered as the sidebar list type. To do so, we need to set the list style toSidebarListStyle.

NavigationView{List{Label("About",systemImage:"info.circle")Label("Settings",systemImage:"gear")}.listStyle(SidebarListStyle())}

Now that we have the Sidebar, let's add a title that would represent the global name. Developers usually choose to put the app name, or, for instance, the Apple Notes app hasFolders to mean what the Sidebar holds.

NavigationView{List{Label("About",systemImage:"info.circle")Label("Settings",systemImage:"gear")}.listStyle(SidebarListStyle()).navigationTitle("Sidebar")}

Navigation from the Sidebar

Now that we have the Sidebar, let's implement navigation for events after user taps on the section. To do that, we need to wrap theLabel in theNavigationLink and provide a destination SwiftUI view.

For instance, if we would add About section in the app, it could look like this:

NavigationLink{AboutView()}label:{Label("About",systemImage:"info.circle")}

Default Home Screen

When a user launches the app, they see an empty view until they select something from the Sidebar.

To avoid this misleading behavior, we should tell the SwiftUI layout engine to render a default or call it a home screen. The trick is to add another view inside theNavigationView and it will be the default screen when the app is launched for the first time.

NavigationView{List{// ...}.listStyle(SidebarListStyle()).navigationTitle("Sidebar")Text("Please select section").font(.largeTitle)}

A good home screen would be a dashboard, frequently used features, or similar functionality.

iPhone and iPad portrait mode

We have only looked at how it would look like in the iPad in landscape mode. But how about in portrait mode or on the iPhone?

iPad portrait mode

Currently, a sidebar on the iPad in portrait mode is rendered off the screen. To show it, we need to press either the back button or swipe from the left side of the device.

iPhone

On the iPhone, the Sidebar is rendered as the default home screen with a navigation list.

Usually, this isn't what we would want, so in this case, we might need to consider changing it on the iPad size devices. This is out of the scope of this post.

TL;DR

Sidebar is a great way how to divide different parts of the app into iPad apps. Currently, it is rendered on the iPad in landscape mode and partly in portrait mode. After adding a list of the app sections, we should remember to provide a default home screen. Otherwise, our users will see an empty screen. Apple has implemented this approach in their apps as well in macOS.