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

See it in context

UI illustration
Sam Chen

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.

WebiOSiPadOSAndroidmacOSWindowsLinux

Web · iOS · iPadOS · Android · macOS · Windows · Linux

Phones usually push the detail screen; tablets and desktops can keep both panes visible.

Primary documentation for the pattern and its platform conventions.