Navigation Pack
Seven menu mechanics on one engine, plus two helpers you can drop in
on their own. Every toggle is a real <button> with
aria-expanded, focus is trapped while a panel is open and handed back
to the toggle when it shuts, Esc closes, and a hidden panel never leaves
its links in the tab order. Pick a preset in the control panel — press H
to hide it.
A section that flips the bar
Mark any section data-npx-theme="light" and the
scramble-links preset repaints the bar while that section sits under it.
Scroll down from here with that preset selected and the links scramble away into a
single Menu button; scroll back up and they scramble in again.
Dim scrim
An independent helper: NavPack.dimScrim(nav) darkens the page
behind an open dropdown so the menu is the only lit thing. Driven from JS rather than
CSS :has(), so tabbing into a dropdown dims the page exactly like hovering it.
Hover — or tab into — “Company” or “Services”. The card behind the bar dims and the open dropdown keeps its own light, because the bar sits above the scrim in the stacking order.
Room to scroll
The sidebar preset scrubs its bar away over exactly one bar
height as you leave the top of the page, then brings it back. This block exists to give
that something to work with.