Sidebar
A sidebar is a panel at the leading edge that lists the main areas of an app. iOS uses it on iPad and Mac, where it can float on Liquid Glass; Material 3 has the navigation drawer and the rail.
Why it matters
A sidebar uses a lot of space, so it belongs on a wide window. Apple points out that on a smaller one a tab bar is the better choice.
It is the top of a hierarchy, which is why Apple limits it to two levels.
Sidebar on iOS and Android
Also called Source list, Navigation sidebar. The same idea in each system, with the values Appetite UI gives it.
| Value | iOS | Android | Appetite UI |
|---|---|---|---|
| Name | Sidebar | Navigation drawer or rail | Not drawn |
| Depth | No more than two levels | Drawer sections, destinations | See below |
| Hiding | Let people hide it, not hidden by default | Modal drawer is hidden until opened | See below |
In Appetite UI
The kit does not draw a sidebar. It draws a Navigation set for the phone, the tab bar and the top bar. The Duo rail is the nearest the file draws.
Example
A notes app on iPad lists folders in a sidebar with two levels; the list of notes and the note itself fill the other panes.
Common mistakes
- More than two levels. Use a split view with a content list between.
- A sidebar on a phone in portrait. Use a tab bar.
- Hiding the sidebar by default, so it is not found.
- Bitmap icons. Use symbols.
Questions
How many levels can a sidebar have?
Apple advises no more than two. For deeper data it suggests a split view with a content list between the sidebar and the detail.
Sidebar or tab bar?
A sidebar needs a lot of room; where space is limited a tab bar is better. Some tab bar styles adapt to provide both.
Sources
The pages the facts above rest on, each read October 30, 2026.