Layouts · Page frame
Master-Detail Layout
Also called: List-detail layout, Two-pane layout, Inbox layout, Master-detail view
A list of records on the left and the selected record's details on the right. Click any item on the left and the right side switches to it without leaving the page.
Click “Labeled” to see what each part is called, or “Anti-pattern” to see the most common mistake.
How to tell AI
Swap in your own content firstUse a master-detail layout. The left column is 320px wide and shows the conversation list; each item has an avatar, a name, a preview of the last message and the time, and the selected item has a highlighted background. The right column shows the full selected conversation, with the title and action buttons at the top. Clicking on the left only switches the right side and doesn't navigate to a new page. Both columns scroll independently. When nothing is selected, the right column shows an empty state message.
Send to
01Decide
Does your content look like this?
Check both columns to confirm Master-Detail Layout is what you need.
Use Master-Detail Layout when
- Users need to view or handle records of the same kind one after another
- Each record has a lot of detail, but two or three key fields in the list are enough to tell them apart
- Users want to keep their place in the list while viewing details and switch to another record anytime
- On desktop, where the screen is wide enough for both the list and the details
Pick something else when
The left column is just a fixed feature menu, not data records
Use insteadSidebar LayoutUsers need to put fields from several records together and compare them column by column (use a Data Table)
Each record has so little content that it can be read in full in the list
Mostly used on phones, where the screen can't fit two columns
Not sure? Upload a screenshot and page analysis will check which layout each block should use.
02Pitfalls
Common misuse
It looks like it works, but it makes things harder for users.
- 01
Clicking an item on the left navigates to a new page, which defeats the point of switching in place
The wireframe below shows this case. The red dashed box marks the problem.The wireframe on the right shows this case. The red dashed box marks the problem.
- 02
The list on the left has no selected state, so you can't tell which record is shown on the right
- 03
The whole page scrolls as one, so when you reach the bottom of the details, the list on the left has scrolled out of view too
03Spot it
How to spot it
Look at the overall structure first, then check a few features you can spot at a glance.
Structure
A fixed-width, scrollable record list on the left and a detail area filling the rest of the space on the right. The two columns sit side by side and scroll independently.
PartsClick one to highlight it in the wireframe above
04Explained
In detail
A master-detail layout splits the screen into two parts. The left side (master) is a list of similar records, like emails, chat conversations or support tickets. The right side (detail) shows the full content of the selected one. Click an item on the left and the right side instantly shows its details, while the list stays put and highlights the current item.
Typical examples are email clients, Slack on desktop and help desk tools. This design lets users work through many records in a row: finish one email, click the next, with no back-and-forth between "open details" and "back to list".
It looks a lot like a Sidebar Layout. The difference is what's in the left column: in a master-detail layout it's data records, which grow and shrink with the data; in a sidebar layout it's a fixed feature menu. Phones can't fit two columns, so on mobile it usually shows the list first, and tapping an item opens a separate detail page.
Developer infoTerm ID, DOM cues, match priority
- Term ID
layout-master-detail- DOM selectors
- No DOM cues. This concept isn't detected directly on a page.
- Priority
- 1 · when several match at the same level, the higher priority wins
- Version
- v2 · updated Sep 29, 2026