Master-Detail Split Navigation — Free HTML CSS JS Snippet

Master-detail (also called list-detail) is the navigation pattern behind email clients, messaging apps, and settings screens: a list of items sits in one pane, and selecting an item shows its full content in an adjacent pane — both visible simultaneously on wide screens. The pattern only becomes interesting on small screens, where there isn't room for two panes side by side, and the interaction has to fall back to a single pane that shows the list first and slides in the detail on selection. This snippet implements both behaviors from one shared DOM and state model, switching purely via CSS media query and one toggled class — not two separate implementations.

One shared data model drives both panes

MESSAGES is the single source of truth; renderList() and renderDetail() both read from it and from the shared activeId. Selecting a message calls selectMessage(id), which updates activeId, marks the message read, and re-renders both panes — there is no separate mobile-only or desktop-only state, which is what keeps the two responsive behaviors from ever drifting out of sync with each other.

Desktop: both panes always visible

At the default (wide) layout, .md-shell is a two-column CSS grid — the list pane at a fixed width, the detail pane filling the rest. Both are always rendered and visible; clicking a list item simply swaps which message's content appears in the already-visible detail pane, with the newly active row highlighted via the .active class.

Mobile: an absolutely-positioned sliding single pane

Below the 560px breakpoint, the media query repositions both .md-list and .md-detail to the same grid cell using position: absolute; inset: 0, so only one is visually on top at a time, and each has a CSS transition on transform. The detail pane starts pre-positioned at translateX(100%) (off-screen to the right); toggling the single .md-showing-detail class on the shell slides the list pane out to -100% and the detail pane in to 0 simultaneously — a coordinated slide driven by one class toggle rather than two independent animations that could fall out of sync.

A back button that only exists where it's needed

The back button is present in the markup for every screen size but stays display: none until the same 560px media query flips it to display: flex — there is no JavaScript check for screen width; the button's visibility itself is a pure CSS responsive concern, while its click handler (removing .md-showing-detail) works identically whether or not the button happens to be visible at the current viewport width.

Read-state tracking independent of selection

A readIds Set tracks which messages have been opened, decoupled from activeId — so a message correctly stays marked as read (no unread dot, no unread-count contribution) even after a different message becomes the active selection, rather than "read" incorrectly meaning "currently selected."