# 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.

Page: https://www.appetiteui.com/glossary/sidebar. Sidebar navigation on iPad and Android tablets. Also called Source list, Navigation sidebar.

## 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.

## iOS and Android

|  | iOS | Android (Material 3) | 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

1. [Apple Human Interface Guidelines: Sidebars](https://developer.apple.com/design/human-interface-guidelines/sidebars)

## Related

- Docs: [Navigation](https://www.appetiteui.com/docs/navigation)
- Glossary: [Navigation drawer](https://www.appetiteui.com/glossary/navigation-drawer)
- Glossary: [Navigation rail](https://www.appetiteui.com/glossary/navigation-rail)
- Glossary: [Split view](https://www.appetiteui.com/glossary/split-view)