Record Pager Header
A record detail header with a back link, a prev and next position counter with keyboard hints, and a title row with a status badge and actions.
A record detail header with a back link, a prev and next position counter with keyboard hints, and a title row with a status badge and actions.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Record Pager Header is a detail header for stepping through a list one record at a time. The top pager row holds a Back to inbox link on the left and, on the right, a K and J keyboard hint reading to move, an 8 of 42 position counter, and up and down icon buttons for the previous and next record. Below it a title row carries the record title, Refund request for order #58213, with an Open status badge, a meta line (From dana@acmecorp.io, Via Email, First reply due in 3h 20m), and right aligned Assign to me and Resolve actions. A body stub follows with a Conversation heading, an opened timestamp, and a dashed placeholder.
The pager row and title row are separate flex rows. The keyboard hints use the ui/kbd primitives, and the prev and next controls are icon buttons carrying aria-labels. The meta line maps a label and value array so each pair renders with a muted label and a solid value.
Reach for this block at the top of a record view reached from a list, so a user can move to the next item without returning to the list first. Wire the counter and the prev and next buttons to your list cursor, and bind the J and K keys to the same actions.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the ticket detail header. Other configurations:
Tip: give the prev and next buttons the same keys shown in the hint, so the visible J and K actually move the record for keyboard users.