Layout / The visual dictionary
List–detail layout.
A navigation pattern linking a list of items with one item's detail.
Also calledmaster detaillist detail
01
UI illustrationSee it in context
Sam Chen
02
What it is
A navigation pattern linking a list of items with one item's detail. Selecting a row reveals that item's information and preserves a clear way back to the list.
When to use it
Use it for mailboxes, contacts, settings, and record browsers.
Know the difference
List–detail is the relationship between screens; split view is one way to display them together.
03
Across platforms
WebiOSiPadOSAndroidmacOSWindowsLinux
Web · iOS · iPadOS · Android · macOS · Windows · Linux
Phones usually push the detail screen; tablets and desktops can keep both panes visible.
04
Go to the source
Primary documentation for the pattern and its platform conventions.