Blocks
Navbar
The product header: brand left, section pills in the middle, help and the account on the right — GdNavbar's slots, filled the way the apps fill them.
The block
The bar is wider than a phone on purpose — a product navbar handles narrow by HIDING items (the docs site's own bar drops its theme label below 600), which is an app decision this demo does not fake. Here, wide content scrolls in its own container.
The rules
- The active section pill is the sunken surface — the same recession grammar as the segmented control, because it is the same idea: one of a few modes, chosen.
- Below the medium breakpoint the side rail collapses INTO this tab set; it never becomes a hamburger.
- The docs site's own bar is this block's other face — menu button (narrow), wordmark, theme control — assembled by the packaged docs chassis.
- The shell itself — geometry, surface, stickiness, slots — is
GdNavbar.