Component pattern · updated 3 Sept 2026
Sticky navigation
A sticky navigation bar stays fixed to the top of the viewport as the page scrolls, so the primary links and the main action are always one movement away. It usually shrinks or gains a background on scroll, and on small screens it collapses to a menu button.
Think of it as
The handrail on a staircase. You do not look at it, but it is always exactly where your hand expects it.
Worked example
This site's nav is sticky and holds eight links balanced around the logo, with the flagship tool, Decode, in position one on purpose. The mobile menu maps the same array, so the order only has to be right in one place. When the footer was condensed, the sticky nav did not change, because the nav promotes what needs discovery and the footer holds what has authority.
Why it matters
A sticky nav spends viewport height on every screen of the page, so its height and its background are design-system decisions, not styling. It is also where focus styling is most often missing: the links are visited by keyboard constantly and rarely tested that way.
How it fails
A nav that hides content behind it because anchors do not offset for its height. A translucent bar whose text fails contrast over whatever scrolls beneath it. A burger menu on the wrong side for the thumb, or one that traps focus.
What to measure open the decoder →
- The bar's height in pixels and the scroll-margin on anchored headings
- Text contrast against the bar's background at its most transparent
- Count of :focus rules on nav links, which the decoder reports
- Whether the menu button announces its expanded state
Where you meet it
- Almost every marketing site
- Documentation sites
- Web applications
On this site
The decoder counts hover, focus and active rules on any page; a nav with hover styles and no focus styles shows up there as a gap.
Showcase collections that exhibit it
Build it
Next rung
The nav is the page's persistent chrome. Its opposite is the footer, which is where everything the nav does not promote must still be reachable.