Responsive navigation
This page describes an agreed design that is not built yet. What the product does today is the single switch described on Layout.
Four widths, two navigations
The widths are Tailwind's md, lg and xl breakpoints. There are no house breakpoint values, so refer to a width by its token name and let the token page carry the number.
| Width | Global navigation |
|---|---|
Below md | Overlay panel, full width |
md up to lg | Overlay panel, 480 px wide |
lg up to xl | Persistent rail, icons only |
xl and up | Persistent rail, icons and labels |
The rail and the overlay show the same list. Destinations, their order and their grouping do not change with width, so a reader who learns the navigation on a laptop can still find things on a phone.
Labels are dropped before the rail is
Below xl the rail keeps its icons and loses its labels. The rail and the header are the fixed regions on the page, so the content area is the only thing that gives — dropping the labels returns most of the rail's width to the page while leaving every destination one click away.
Below lg the rail goes altogether and a menu button in the header opens the navigation over the page. A rail narrow enough to share a tablet with a content column would leave both too tight to use.
The tablet overlay stops at 480 px
Between md and lg the overlay panel is capped at 480 px rather than filling the screen. The navigation is a list of short labels, so a full-width panel at 1023 px sets them against a wide empty column and hides the page the reader came from. Keeping an edge of the page visible also makes it obvious that the panel is covering something and can be closed.
Below md the panel takes the full width, because at phone widths there is no useful page left to show beside it.
Don't leave two navigations reachable at once
Keeping the rail in place behind an open overlay gives the reader two live copies of the same list and no way to tell which one the page is responding to. The rail is present or the overlay is, never both.
Every overlay needs a close that isn't a destination
The panel closes on its own close control, on the scrim behind it, and on choosing a destination. A reader who opened the navigation to look at it has to be able to get back to the page without navigating away from it.
The page is one column below lg
Where a page puts panels in a right-hand column beside the main content, those panels move below it rather than narrowing. Two columns inside 1023 px leaves neither wide enough to read.
Content that is wide by nature — trace maps, timelines — keeps its full-screen control instead of being scaled down to fit. A map squeezed into a phone column shows its shape and none of its labels.