Chrome — CrystalNav
Six scroll behaviours, six layouts, one state machine
Every panel below is a real scroll container with a real bar in it. Scroll one and the flags underneath it update on every frame. The point of that readout is the last chip: rest parity — at scroll 0 every derived flag must equal its rest value. A bar that arrives and latches turns it red.
The interaction catalogue
- Good for
- Long-form reading — nav absent while reading, back the instant it is wanted.
- Costs
- The nav is off screen. Direction-based, so it is the easiest one to get wrong.
- Evidence
- VERIFIED against headroom.js (pinned / unpinned / top / not-top, with offset and tolerance).
Away while reading, back the instant it is wanted
Scroll down, then scroll back up. The bar must come back — and at the very top it must be exactly as it started.
A bar is judged on its content-to-chrome ratio, not its pixel height — NN/g praises The New Yorker at roughly 13:1 and criticises a shop header at 2:1, and says the ratio matters more on a phone, not less. This body text exists so the ratio is visible rather than asserted, and so there is something real to scroll.
A bar is judged on its content-to-chrome ratio, not its pixel height — NN/g praises The New Yorker at roughly 13:1 and criticises a shop header at 2:1, and says the ratio matters more on a phone, not less. This body text exists so the ratio is visible rather than asserted, and so there is something real to scroll.
A bar is judged on its content-to-chrome ratio, not its pixel height — NN/g praises The New Yorker at roughly 13:1 and criticises a shop header at 2:1, and says the ratio matters more on a phone, not less. This body text exists so the ratio is visible rather than asserted, and so there is something real to scroll.
A bar is judged on its content-to-chrome ratio, not its pixel height — NN/g praises The New Yorker at roughly 13:1 and criticises a shop header at 2:1, and says the ratio matters more on a phone, not less. This body text exists so the ratio is visible rather than asserted, and so there is something real to scroll.
A bar is judged on its content-to-chrome ratio, not its pixel height — NN/g praises The New Yorker at roughly 13:1 and criticises a shop header at 2:1, and says the ratio matters more on a phone, not less. This body text exists so the ratio is visible rather than asserted, and so there is something real to scroll.
A bar is judged on its content-to-chrome ratio, not its pixel height — NN/g praises The New Yorker at roughly 13:1 and criticises a shop header at 2:1, and says the ratio matters more on a phone, not less. This body text exists so the ratio is visible rather than asserted, and so there is something real to scroll.
<CrystalNav links={links} scrollBehavior="hide" />The six layouts
Same component, same links, same tokens. Every one of these is operable by keyboard — Tab through a panel and the focus ring is a two-colour ring, which is WCAG 2.2 SC 2.4.13’s named remedy for indicators over imagery.
Logo left, nav right
logo-left-nav-rightLogo left, nav right
The default — the arrangement that survives the most link counts.
A bar is judged on its content-to-chrome ratio, not its pixel height — NN/g praises The New Yorker at roughly 13:1 and criticises a shop header at 2:1, and says the ratio matters more on a phone, not less. This body text exists so the ratio is visible rather than asserted, and so there is something real to scroll.
The default — the arrangement that survives the most link counts.
Logo left, nav left
logo-left-nav-leftLogo left, nav left
Reads as one unit. Wants a short link list.
A bar is judged on its content-to-chrome ratio, not its pixel height — NN/g praises The New Yorker at roughly 13:1 and criticises a shop header at 2:1, and says the ratio matters more on a phone, not less. This body text exists so the ratio is visible rather than asserted, and so there is something real to scroll.
Reads as one unit. Wants a short link list.
Logo left, nav centred
logo-left-nav-centreLogo left, nav centred
Balanced, and it holds a utility cluster on the right without crowding.
A bar is judged on its content-to-chrome ratio, not its pixel height — NN/g praises The New Yorker at roughly 13:1 and criticises a shop header at 2:1, and says the ratio matters more on a phone, not less. This body text exists so the ratio is visible rather than asserted, and so there is something real to scroll.
Balanced, and it holds a utility cluster on the right without crowding.
Centred logo
centred-logoCentred logo
Fashion and editorial. Splits the links either side of the wordmark.
A bar is judged on its content-to-chrome ratio, not its pixel height — NN/g praises The New Yorker at roughly 13:1 and criticises a shop header at 2:1, and says the ratio matters more on a phone, not less. This body text exists so the ratio is visible rather than asserted, and so there is something real to scroll.
Fashion and editorial. Splits the links either side of the wordmark.
Centred stack
centred-stackCentred stack
Two rows. The tallest arrival state, and the most ceremonial.
A bar is judged on its content-to-chrome ratio, not its pixel height — NN/g praises The New Yorker at roughly 13:1 and criticises a shop header at 2:1, and says the ratio matters more on a phone, not less. This body text exists so the ratio is visible rather than asserted, and so there is something real to scroll.
Two rows. The tallest arrival state, and the most ceremonial.
Hamburger only
hamburger-onlyHamburger only
⚠️ NN/g: desktop users were at least 39% slower and discoverability dropped over 20%. Choose it knowingly.
A bar is judged on its content-to-chrome ratio, not its pixel height — NN/g praises The New Yorker at roughly 13:1 and criticises a shop header at 2:1, and says the ratio matters more on a phone, not less. This body text exists so the ratio is visible rather than asserted, and so there is something real to scroll.
⚠️ NN/g: desktop users were at least 39% slower and discoverability dropped over 20%. Choose it knowingly.
Search, account, cart — the slots
A single cta cannot carry a cart, an account and a search box at once, so the bar has named slots for each. They render in a fixed order — search, account, utility, CTA — so a fleet of sites stays predictable.
Autumn, in eleven pieces.
The announcement scrolls away for good; the bar stays. Scroll back to the very top and the offer returns — because it is derived from scroll position, not latched by an event.
A bar is judged on its content-to-chrome ratio, not its pixel height — NN/g praises The New Yorker at roughly 13:1 and criticises a shop header at 2:1, and says the ratio matters more on a phone, not less. This body text exists so the ratio is visible rather than asserted, and so there is something real to scroll.
A bar is judged on its content-to-chrome ratio, not its pixel height — NN/g praises The New Yorker at roughly 13:1 and criticises a shop header at 2:1, and says the ratio matters more on a phone, not less. This body text exists so the ratio is visible rather than asserted, and so there is something real to scroll.
A bar is judged on its content-to-chrome ratio, not its pixel height — NN/g praises The New Yorker at roughly 13:1 and criticises a shop header at 2:1, and says the ratio matters more on a phone, not less. This body text exists so the ratio is visible rather than asserted, and so there is something real to scroll.
A bar is judged on its content-to-chrome ratio, not its pixel height — NN/g praises The New Yorker at roughly 13:1 and criticises a shop header at 2:1, and says the ratio matters more on a phone, not less. This body text exists so the ratio is visible rather than asserted, and so there is something real to scroll.
A bar is judged on its content-to-chrome ratio, not its pixel height — NN/g praises The New Yorker at roughly 13:1 and criticises a shop header at 2:1, and says the ratio matters more on a phone, not less. This body text exists so the ratio is visible rather than asserted, and so there is something real to scroll.
A bar is judged on its content-to-chrome ratio, not its pixel height — NN/g praises The New Yorker at roughly 13:1 and criticises a shop header at 2:1, and says the ratio matters more on a phone, not less. This body text exists so the ratio is visible rather than asserted, and so there is something real to scroll.
The full-screen menu
A menu that covers the page is a modal dialog, so this follows the W3C ARIA APG modal pattern in full. Open it with the keyboard and check all five: focus moves in, Tab wraps inside, Escape closes, focus returns to the trigger, and there is a visible close control — not just Escape, which is a keyboard user’s only exit in the reference implementation this was harvested from.
Hamburger at every width
⚠️ This layout is a documented UX loss on desktop — 39% slower, 20% less discoverable. It is in the catalogue with that cost written on it, and it is never a default.
A bar is judged on its content-to-chrome ratio, not its pixel height — NN/g praises The New Yorker at roughly 13:1 and criticises a shop header at 2:1, and says the ratio matters more on a phone, not less. This body text exists so the ratio is visible rather than asserted, and so there is something real to scroll.
A bar is judged on its content-to-chrome ratio, not its pixel height — NN/g praises The New Yorker at roughly 13:1 and criticises a shop header at 2:1, and says the ratio matters more on a phone, not less. This body text exists so the ratio is visible rather than asserted, and so there is something real to scroll.
A bar is judged on its content-to-chrome ratio, not its pixel height — NN/g praises The New Yorker at roughly 13:1 and criticises a shop header at 2:1, and says the ratio matters more on a phone, not less. This body text exists so the ratio is visible rather than asserted, and so there is something real to scroll.
A bar is judged on its content-to-chrome ratio, not its pixel height — NN/g praises The New Yorker at roughly 13:1 and criticises a shop header at 2:1, and says the ratio matters more on a phone, not less. This body text exists so the ratio is visible rather than asserted, and so there is something real to scroll.
A bar is judged on its content-to-chrome ratio, not its pixel height — NN/g praises The New Yorker at roughly 13:1 and criticises a shop header at 2:1, and says the ratio matters more on a phone, not less. This body text exists so the ratio is visible rather than asserted, and so there is something real to scroll.
A bar is judged on its content-to-chrome ratio, not its pixel height — NN/g praises The New Yorker at roughly 13:1 and criticises a shop header at 2:1, and says the ratio matters more on a phone, not less. This body text exists so the ratio is visible rather than asserted, and so there is something real to scroll.
What the component owns so no site has to
Anchors clear the bar
scroll-padding-top on the container (the keyboard fix, WCAG technique C43) AND scroll-margin-top on every [id] (the jump-link fix). The margin goes on whatever carries the id — putting it on a heading inside a section that carries the id does nothing at all.
Focus is never hidden
A sticky bar is the textbook failure for SC 2.4.11 — WCAG failure F110 names this exact case.
The focus ring survives artwork
A two-colour ring (white with a black outer shadow), which is SC 2.4.13’s named remedy for a near-infinite set of backdrops.
Reduced motion is honoured precisely
Travel and height snap; colour and border are kept at ~160ms because colour is not motion and removing it removes the legibility cue. The entrance is dropped including its delay.
aria-expanded and aria-controls
On the trigger, pointing at the panel’s real id — verified by a test, not by eye.
Closed menus are inert
visibility:hidden plus the inert boolean, so a closed menu’s links are never reachable by Tab from the page behind it.
Every option, and its default
| Prop | Default | Why that default |
|---|---|---|
scrollBehavior | 'none' | NN/g: “it’s best to not use animation at all.” A site opts into movement. |
layout | 'logo-left-nav-right' | The arrangement that survives the most link counts. |
height | { rest: 72, condensed: 56 } | [TASTE]. The research argues content-to-chrome ratio, not pixels. 44px from apple.com is the low anchor. |
entrance | false | [TASTE]. No study was found measuring staggered entrances against a control, and it costs ~0.9s against Nielsen’s 1.0s limit. |
menuAt | 'mobile' | Hidden navigation on desktop is 39% slower and 20% less discoverable. |
transparent | false | NN/g is blunt about low-contrast translucent headers. |
announcement | false | It is the tallest arrival state. |
mobileVariant | 'drawer' | Unchanged from before this pass — nothing existing was altered. |