Master Detail
主从视图
Aliases:Master Detail主从视图主从布局列表详情联动左右分栏双栏视图左边列表右边详情
What is it
A summary list on one side with the selected item's full detail on the other; clicking an entry updates the detail pane instantly. It solves the constant back-and-forth between list and detail pages — overview and depth share one screen, so users keep their sense of place and switching or comparing multiple items becomes cheap.
Interactive playground
Try it. Make an informed choice.Loading lab…
✓ When to use
- Item-dense tools like mail clients and file managers
- Fast switching or comparison across many items
- Wide viewports with room for both panes
✕ When not to use
- Narrow screens — degrade to list page then detail page
- Heavy detail content that crowds out the list
- Unrelated items where users inspect a single object
Variants
Two-pane
双栏同屏
Classic side-by-side layout for wide screens, click syncs panes
Stacked
窄屏堆叠
On narrow screens list comes first, detail opens over it with a back affordance
Persistent selection
常驻选中
The list keeps a visible selection and scroll position across switches
Implementation
flexoverflow-y-autoaria-selectedmin-widthLay out with flex: the master list gets a fixed or fluid width with its own overflow-y-auto, and the detail pane fills the rest. Express selection with role="listbox"/option or buttons carrying aria-selected. On narrow screens use container queries or breakpoints to stack: list first, detail pushed in or overlaid on selection, with an explicit back affordance.
Related concepts
A vertical navigation area pinned to one side of the page (usually the left), carrying the primary hierarchy of a product. The de facto standard of admin systems: brand and global search on top, module tree in the sidebar, content focused on the task.
ComponentsUsed withA two-dimensional grid aligning data in rows and columns — one record per row, one field per column — built for column-by-column comparison, sorting and high-volume browsing. Rows highlight on hover and support selection; column headers usually carry sort controls.
ComponentsUsed withA self-contained rectangular container outlined by rounded borders or a surface colour, aggregating related content: cover, title, excerpt and actions. The universal display unit of content feeds, dashboards and commerce lists.
ComponentsUsed withA panel that slides in from a screen edge (usually right or left), usually with a backdrop. Lighter than a modal: it carries longer content without leaving the page, and closing restores the original context. On mobile it appears as a nav drawer or a bottom sheet.
ComponentsUsed withA row of switchable labels that divide one region into mutually exclusive views: the tab headers stay visible and clickable, and only the active tab's panel shows while the rest stay hidden. Packs several tightly related contents into one area to switch in place instead of full-page navigation. Arrow-key navigation between tabs makes it a classic accessibility showcase.
ComponentsUsed with