Patterns
Show a list beside the selected item’s details so people can move through records without losing their place.
How it works
- List on the left, details on the right; the divider between them is resizable and remembers its width.
- Selecting a row shows its details without moving focus; Enter or a double click opens it fully.
- Arrow keys move through the list and update the details pane.
- Below the narrow breakpoint, show one pane at a time with a Back control.
See it built: search full-screen page.
Elements
Search · List · Resizable · ObjectDisplay · Overflow · ScrollArea
Usability
Do
- Keep the list’s scroll position and selection when the details change.
- Show a skeleton in the details pane while it loads.
Don’t
- Don’t nest a second scroll area inside the details pane’s header.
- Don’t move focus into the details pane on selection.
Accessibility
- The list marks the shown row with
aria-selectedoraria-current. - The details pane is a labelled region so it can be reached by landmark navigation.
- The resize handle is a focusable separator that arrow keys resize.
Test your implementation too. Each element’s own contract is on its page; a flow adds focus moves and announcements that need their own keyboard and screen reader check.