UI Terms visual dictionary

Layouts

Master-detail

A two-pane layout with a list of items on one side and the selected item's details on the other.

Click a row in the list, see its contents in the detail pane. Native to email clients, file browsers, and CRMs. On narrow screens it usually collapses to a drill-down flow: tap an item, push the detail view, swipe back to the list. Material Design uses 'list-detail' to avoid the master/detail terminology debate.

Also called

list-detaillist-and-detail

When to use

  • Browsing a collection where one item is active at a time (email, contacts, files)
  • Where users need to scan a list and inspect items without losing context

When not to use

  • Lists where items don't have rich detail content
  • Linear flows where users only view one item at a time

Source

Long-standing UI pattern; Apple HIG and Material Design both document it.