Split Page Layout
ProA two-panel layout that divides the viewport into a list/navigation panel and a detail/content panel. Commonly used for email clients, file managers, and master-detail views. Supports a resizable divider between panels and collapses to a single panel on smaller screens.
4 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Default | ||
| Resizable | Two-panel split with a draggable resize handle between panels. | Use when users need to adjust the ratio between panels based on their workflow. |
Usage Guidelines
Maintain a minimum width for each panel to prevent content from becoming unreadable.
Allow either panel to shrink below its minimum content width.
Collapse to a stacked layout on mobile with clear back-navigation between panels.
Use a split layout for unrelated content — the panels should have a master-detail relationship.
Persist the user's resize preference in local storage across sessions.
Hide the detail panel entirely when nothing is selected — show an empty state instead.
Use aria-label on each panel to identify its purpose to screen readers.
Code
Design Tokens
Accessibility
- Each panel should have a descriptive aria-label — "Conversation list", "Conversation detail".
- The resize divider uses role="separator" with aria-orientation="vertical" and aria-valuenow/min/max.
- On mobile collapse, provide a visible back button to return from detail to list.
- Focus should move to the detail panel when an item is selected in the list.
- List panel should use role="listbox" with role="option" children for item selection.