The simultaneous display of collection and item, balancing contextual awareness against screen real estate. Unlike Hub and Spoke, which requires navigation between screens, Overview-Detail maintains context by keeping the parent list visible.
Behavioural position
- Rapid browsing — actors can scan list and verify details without back-and-forth navigation.
- Comparison — actors can quickly switch between items to compare details.
Variants
- Split view – The list and detail are permanently locked side-by-side. Common in email clients and admin panels. – Popover – The detail view temporarily overlays the list. This preserves the list’s full width when the detail is not active but allows quick context switching.
Related patterns
Enacts
- Malleability — The capability to switch between topologies.
Alternatives
- Hub and spoke — The sequential alternative.
Related
- Data view — The "Overview" component.
- Item view — The "Detail" component.
- Intent & Interaction — actors can scan list and verify details without back-and-forth navigation.