Master-Detail: Show a List, Focus on One

WHY IT EXISTS The master-detail pattern was born from a simple constraint: limited screen space. Early 80-character-wide displays could not show all the fields for a complex data entity in a single table row. The solution was to split the view, showing a scannable summary list and the full details for only the selected item.

THE MENTAL MODEL Think of a master-detail interface like a file cabinet. The master list is the set of labels on the drawers, which you can scan quickly to find what you're looking for. The detail view is the contents of the single folder you pull out to examine closely. This lets you browse a large collection without being overwhelmed by information.

HOW IT WORKS The interface has two connected parts. First, a master view, typically a list or table, displays a concise summary of each item in a collection. This summary contains just enough information—like a name, date, or status—to identify an item. Second, a detail view displays all the information for the single item currently selected in the master view. The two are linked: selecting a different item in the master list immediately updates the detail view to show its corresponding content.

WHEN TO USE IT Use this pattern when you need to present a collection of complex items where each item has more data than can fit in a single row. It's perfect for applications that involve browsing and managing a set of objects, such as an email client (list of messages, content of one), a contacts app (list of names, details of one), or an e-commerce admin panel (list of products, editor for one).

WHEN NOT TO USE IT Avoid this pattern if each item has very few details; a simple table is more efficient and uses less screen real estate. It's also a poor choice if the user's main task is to compare multiple items side-by-side, as this requires clicking back and forth. The pattern also fails if you can't create a useful, identifying summary for the master list.

ONE CANONICAL EXAMPLE An email client is the classic master-detail interface. The master pane lists emails, showing only the sender, subject, and date. This is scannable. When you click an email, the detail pane populates with the full body, headers, and attachments for that one message. This prevents the UI from being cluttered with the full text of every email in your inbox.