Master–Detail

Going through many records, one after another: the list on one side, the one you're on beside it. For triage (a queue to clear, an inbox, approvals); to work on one record for a while, see List → Detail → Edit. Pick an invoice, then use ↑ ↓; mark one as paid and the next unpaid one opens. Drag the frame's corner narrower for one pane at a time.

The pattern

An App Shell whose page is a Split Pane: the list, the handle, the record.

Globex Billing

Select an invoice

Pick one from the list, or use ↑ ↓ to go through them.

The list

Records as links, in a Nav List named for what it lists: each has its own address, opens in a new tab, and the open one is aria-current="page". Its status is a Tag on the row.

↑ and ↓ (and J K, Home End) open the previous and next record while focus stays in the list, so going through twenty is twenty key presses. The list says so to screen readers (aria-describedby).

Above it, what narrows it: here a Segmented Control (All, Unpaid), sharing the pane's width (data-fill).

The record

Before anything is picked, an Empty State says what to do. Then the record's Page Header (its title a level under the page's: h2) and its parts in Cards.

Acting on a record (Mark as paid) updates it in both panes, says so in a Toast, and opens the next one that needs it: the queue clears itself.

Narrow

Under 40rem one pane shows at a time: the list, then the record with a back link (shown only then) that returns to the list and to the row you came from. This is a container query on the pattern's own wrapper, today; a Split Pane hint for it may come.