Floating Pill Split-Rail Navbar
A fixed floating pill navbar with a split-justified three-zone rail: "Vandoko" wordmark with a 2px cyan superscript dot (lone signal) on the left, four mono-tracked small-caps flat links in the centre, and a ghost "Contact" text link plus one solid cyan "Start a sprint" button on the right. On scroll the pill contracts to tighter vertical padding and gains a hairline top border. No icons anywhere. Collapses to a top-anchored Sheet drawer on mobile.
Floating Pill Split-Rail Nav
A floating hairline-bordered pill nav that splits into three zones — wordmark left, mono-caps links centre, ghost contact + primary CTA right — and contracts on scroll. The only color is the 2px cyan dot after "Vandoko" and the solid "Start a sprint" button; everything else is monochrome on obsidian.
Installation
$npx shadcn@latest add @vandoko/vkb-nav-07Synthesis
Design synthesis (not a recolor): shadcnblocks structure + Mobbin form (landing-page14 typeset-ledger editorial — premium-agency homepage) + Vandoko color & content (oklch tokens, cyan as the lone signal, brand-true copy).
Lineage
| Property | Value |
|---|---|
| Source | @shadcnblocks/navbar8 |
| Version | 1.0.0 |
| Curated | 2026-05-28 |
| License | Commercial |
Sources
- shadcnblocks — Navbar 8 (payload)
- Mobbin (page-coherent form spec): Premium agency homepage
Modifications
- floating split-justified pill rail on a hairline-bordered rounded-full container; oklch semantic tokens only
- "Vandoko" wordmark carries a 2px cyan superscript dot as the lone signal; mono small-caps links and CTA
- contracts on scroll past 60px; collapses to a top-anchored Sheet drawer on mobile
Ported by vkb-page-port-v2 (landing-page14, concept-led page port).
Related Components
Icon Mega-Panel Platform Navbar
Platform navbar whose desktop navigation-menu opens icon mega panels, with a mobile accordion drawer and a "Start a sprint" CTA.
Editorial Sticky Dropdown Navbar
Clean full-width sticky navbar for the Vandoko brand: wordmark with a trailing superscript cyan dot (the lone accent), a NavigationMenu link cluster with per-item dropdown panels, a ghost "See the work" text link, and a solid cyan "Start a sprint" CTA. Dropdowns show label + description rows, no icons. Mobile collapses to a top Sheet with Accordion expansion for dropdown items.