VOCABULARY / ENTRY

Master–Detail

master-detail

Add to comparison +

Layout & information architectureScope: Pagemaster-detail · v0.1.0

Keep a selectable list of items available while showing the details of the current selection.

Interactive specimen · Fictional product FIELDNOTES

Current note

Weekend walk

Rediscover the city along its old streets.

Recognizing it

An explicit current selection
A linked list and detail view
A way back on narrow screens

Concept boundary

Columns alone do not make a master-detail layout. The defining relationship is that selecting an item updates its details.

When to consider it

People repeatedly inspect individual items in detail
The list context should remain available

When to be cautious

People need to compare many fields across several items simultaneously
Squeezing two unreadable columns onto a narrow screen

Tradeoff

Browsing stays continuous, but narrow spaces may require navigation between list and detail views.

Conditional rules · Editorial advice

When An item is selected in the listMustKeep the selection visible and update the corresponding details.

When Space is insufficientMustProvide a complete, reversible path from the list to an item and back.

Related entries

Bento Grid ↗Conditional alternative · Choosing the main browsing structure

Master-detail favors individual inspection; Bento favors an overview.

Inline Edit ↗Works with · Editing a short field in the detail view

Editing can retain the current browsing context.

Sources and what they support

Apple HIG · Split views ↗

A selection in the primary pane can drive secondary content; compact environments require adaptation.

Retrieved: 2026-09-15

Definitions reference these sources. Digital specimens, selection advice, relationships, and recipes are editorial work and have not been validated through user research.

Type extensions and implementation notes

Capability tags describe this specimen only; verify the implementation again in a real product.

{
  "states": [
    "unselected",
    "selected"
  ],
  "a11y": [
    "List items use named buttons",
    "Detail updates do not steal focus"
  ],
  "motion": "No animation required"
}

Open the Agent JSON file for this entryThis file repeats every field of this entry verbatim and adds its sources, archive status, and editorial scope.