Master-detail

The master–detail pattern includes two views: the master view and the detail view.

• (1) The master view includes interactive elements (commonly a table), that allow the drill-in experience to happen. When an item is activated, the user navigates to a new page: the detail view (2).
• (2) Once the user activates an item, the detail view appears with a master panel and a detail area. The master panel is a simplified version of the master view.
• (3) The detail view allows quick navigation between items.

Note: Some exceptional experiences may include a master view only in small screens or mobile experiences. This includes cases like Settings pages or other pages that don't benefit from having a master view.

Detail view

• (1) Master panel: Master panels live outside the detail area, and have their own scrolling area. They also have a fixed width, which depends on the screen size. In small screens, master panels are not visible, so page designs need to keep in mind not to include essential actions or information.
• (2) Detail area
• (3) Detail view

Master panel

• (1) Master panel header area: A header area may include a title with other elements, like an "up” button.
• (2) Master panel local navigation: An optional area with flexible height and custom elements.
• (3) Collection list: A collection of items, generally represented by rows.
• (4) Title: Use the same title as the previous page, or a simplified version. Unlike titles in pages, titles in the master panel are not interactive, except for the "up” button.
• (5) Active item list: The collection list needs to always have one active item. Depending on the flow, the active list item may be hidden after an action (e.g. when the user narrows the list using an inline filter).

Breakpoints:

• Small and xsmall (narrower than 1024px): Side panels are not visible in small and xsmall breakpoints
• Medium (wider than or equal to 1024px): Side panel at 280px
• Large (wider than or equal to 1366px): Side panel at 320px
• Xlarge (wider than 1920px): Side panel at 384px

Alignment

The master panel title and list items should align as much as possible, particularly when the title area includes a back button, and the list items include icons (1). The same rules apply to alignment between the master panel title and the detail area header (2). It’s OK to include elements such as long titles and descriptions in the detail area header, however alignment will work better for single-line titles.

Collection lists

Single-line items

• (1) Single-line item, no visual
• (2) Single-line item, 16px visual
• (3) Single-line item, 24px visual

Two-line items

• (1) Two-line item, no visual
• (2) Two -line item, 16px visual
• (3) Two -line item, 24px visual

Tree-based items

• (1) Single-line, single-line
• (2) Different styles for first-level

Sections

• (1) Subtle section title
• (2) Strong section title

Side labels and elements

• (1) Side label, single-line
• (2) Side label, two-line
• (3) Custom side elements

Scrolling behavior

Compact header while scrolling

Master panel with local navigation

Related

• Header
• Shell
• Table