Collapses the 25-destination quick-nav from 3 wrapped rows to a single slim row
that stays one row regardless of how many destinations are added.
Structure:
- 7 direct one-click pills for the most-used flagships: Topic Map, Digest,
Kubernetes, Docker, GitOps, Terraform, AI & MCP.
- 5 category menus for the long tail, built with the native HTML Popover API +
CSS Anchor Positioning (Baseline 2026), zero JS:
☁️ Cloud (AWS · Azure · GCP) · 🌐 Network (Networking · Istio · K8s Net)
· 🔐 Security (K8s Security · DevSecOps)
· ⚙️ Ops (CI/CD · Observability · SRE · DevOps)
· ⋯ More (Videos · Ansible · Messaging · MLOps · Methodology · V1 Archive)
Why this design: keeps the hot paths at one click (the project's whole value),
while the rarely-used clusters fold away — so the bar never grows past one row.
Popover API gives free Esc / click-outside dismissal and focus management and
works identically on touch and desktop; menus drop below their button via
position-area with flip fallbacks, animate in via @starting-style, and rotate
their caret using :has(). prefers-reduced-motion honored. All 25 destinations
preserved. Bumps v2_elite.css cache-bust to ?v=2.9.31. V2-only.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
8b39d2ae8e