# Split view

> A split view shows several levels of an app at once: a primary pane, a secondary one and sometimes a third. It needs width, so it belongs to regular windows and collapses to one pane on a phone.

Page: https://www.appetiteui.com/glossary/split-view. Split view and list-detail layouts on iPad and Android. Also called List-detail, Master-detail, Multi-pane layout.

## Why it matters

Selecting an item and seeing its content next to the list saves a tap and keeps people oriented. It needs room, and windows on iPad are resizable.

A design has to say what happens at every width, not only at the widest.

## iOS and Android

|  | iOS | Android (Material 3) | Appetite UI |
| --- | --- | --- | --- |
| Name | Split view | List-detail layout, by window size class | Size class modes |
| Panes | Two or three vertical panes on iPad | List and detail panes on medium and expanded windows | See below |
| Compact windows | Avoid: one pane at a time | One pane at a time | See below |

## In Appetite UI

The kit has no split view component. It draws phone screens, and the Duo rail is the nearest it comes to a second pane.

## Example

A mail app on iPad shows folders, the message list and the message. On iPhone in portrait it shows the list, and a tap pushes the message.

## Common mistakes

- A split view in a compact window, where panes truncate.
- No highlight on the selected item in each pane.
- Designing only the widest width.
- Two ways to navigate to the same pane.

## Questions

### When should an app use a split view?

In a regular environment. Apple says to prefer a split view when there is horizontal room, and not in a compact one such as iPhone in portrait.

### How many panes can a split view have on iPad?

Two vertical panes, like Mail, or three, like Keynote.

## Sources

1. [Apple Human Interface Guidelines: Split views](https://developer.apple.com/design/human-interface-guidelines/split-views)
2. [Android Developers: Window size classes](https://developer.android.com/develop/ui/compose/layouts/adaptive/window-size-classes)

## Related

- Docs: [iOS](https://www.appetiteui.com/docs/ios)
- Docs: [Navigation](https://www.appetiteui.com/docs/navigation)
- Article: [iPhone screen sizes in Figma: 402 × 874 for iPhone 18 Pro, 440 × 956 for Pro Max](https://www.appetiteui.com/blog/iphone-screen-sizes-figma)
- Glossary: [Size classes](https://www.appetiteui.com/glossary/size-classes)
- Glossary: [Sidebar](https://www.appetiteui.com/glossary/sidebar)
- Glossary: [List row](https://www.appetiteui.com/glossary#list-row)