Master-detail view

Keep a collection visible while showing details of the selected record.

Live preview Try the effect

Orders

Design systemToday, Tuesday

Total visits12,480↗ 12.8%

Active users1,286↗ 8.2%

Complete tasks86↗ 16%

Recent projects Status

Website redesignIn progress

Order managementCompleted

Data visualizationIn progress

This demo explains the pattern. Adapt the styling and dimensions to your project.

What it is

Keep a collection visible while showing details of the selected record. This example illustrates an admin interface. Describe the target, trigger and final state when adapting it to your project.

When to use

Email, order management and file browsers.

Related concepts

A split pane describes geometry; master-detail describes the relationship between selection and details.

Describe this effect

Output language

Keep the record list beside the detail pane. Selecting a record updates its details without losing list context.

Generated from the parameters · Add to a plan to edit

References

Specification and implementation reference

Definitions are editorial. Common and descriptive names are not necessarily standardized terms.