Navbar — <mv-navbar>
Sticky editorial navigation bar that blurs on scroll: mono labels and counters, popover mega menus with an accent rule on the bar marking the open menu, an optional shared viewport that resizes between menus, a floating mode that detaches into a card on scroll, and a stacked search + sections layout; dialog-based mobile drawer with numbered links.
Category Blocks Type Block (ready-made section) (<mv-navbar>) Status stable Also installs button , dialog , input , kbd Keywords navbar, navigation, header, menu, mega menu, navigation menu, sticky, blur, search, mobile menu, drawer
When to use
A marketing site needs a sticky editorial top bar that blurs on scroll with dropdown mega menus Navigation should detach into a floating card once the page scrolls Search must sit in the header with the sections on a second row Avoid when
A store has deep category trees with promo tiles and mobile drill-down → use Mega Menu instead
Get Navbar. Included in every plan: the Pro pack ships all 226 components with the CLI and the MCP server used below.
See plans
Install
node scripts/add.mjs navbar --out ./src/marvelousAI agent with the Marvelous UI MCP server: install_components({ slugs: ["navbar"], target_dir: "<absolute path>/src/marvelous", framework: "react" }).
Files copied (dependencies included): tokens/tokens.css, core/base.css, core/dismiss.js, core/element.js, core/focus.js, core/observe.js, core/position.js, components/navbar/navbar.css, components/navbar/navbar.js, components/button/button.css, core/dom.js, core/motion.js, components/dialog/dialog.js, components/dialog/dialog.css, components/input/input.css, components/kbd/kbd.css.
Usage
Canonical markup — start from it and customize with attributes, data-* and CSS variables:
<mv-tabs id="navbar-demo" value="bar" data-size="sm" style="gap:0;background:var(--mv-bg)">
<style>
#navbar-demo > [role="tablist"] { justify-self: center; margin: .75rem auto; }
#navbar-demo .nd-page { position: relative; height: 560px; overflow: auto; border-top: 1px solid var(--mv-border); background: var(--mv-bg); overscroll-behavior: contain; }
#navbar-demo .nd-hero { display: grid; justify-items: start; gap: .9rem; width: min(100% - 2.5rem, 64rem); margin: 0 auto; padding: 4rem 0 2.5rem; }
#navbar-demo .nd-hero > * { margin: 0; }
#navbar-demo .nd-eyebrow { color: var(--mv-fg-subtle); font: 500 .6875rem/1.4 var(--mv-font-mono); letter-spacing: .06em; text-transform: uppercase; }
#navbar-demo .nd-hero h2 { max-width: 36rem; font: 600 clamp(1.8rem, 5cqi, 2.6rem)/1.1 var(--mv-font-display); letter-spacing: -.03em; text-wrap: balance; }
#navbar-demo .nd-hero p:last-child { max-width: 34rem; color: var(--mv-fg-muted); line-height: 1.6; }
#navbar-demo .nd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); width: min(100% - 2.5rem, 64rem); margin: 0 auto; border-top: 1px solid var(--mv-border); border-left: 1px solid var(--mv-border); }
#navbar-demo .nd-card { display: grid; gap: .55rem; align-content: start; padding: 1.25rem; border-right: 1px solid var(--mv-border); border-bottom: 1px solid var(--mv-border); }
#navbar-demo .nd-n { color: var(--mv-fg-subtle); font: 500 .6875rem/1 var(--mv-font-mono); }
#navbar-demo .nd-card strong { margin-bottom: .4rem; font-weight: 600; }
#navbar-demo .nd-card i { height: .5rem; border-radius: 2px; background: var(--mv-bg-muted); }
#navbar-demo .nd-band { height: 26rem; width: min(100% - 2.5rem, 64rem); margin: 0 auto; background: repeating-linear-gradient(to bottom, transparent 0 31px, var(--mv-border) 31px 32px); mask: linear-gradient(to bottom, #000, transparent); }
</style>
<div role="tablist" aria-label="Block variant">
<button role="tab" data-value="bar">Bar + shared panel</button>
<button role="tab" data-value="floating">Floating</button>
<button role="tab" data-value="stacked">Stacked + search</button>
</div>
<!-- ═════════ Bar: data-mega="viewport" ═════════ -->
<div role="tabpanel" data-value="bar">
<div class="nd-page" tabindex="0" aria-label="Scrollable demo page">
<mv-navbar>
<header class="mv-navbar" data-mega="viewport">
<div class="mv-navbar-inner">
<a class="mv-navbar-brand" href="#navbar-demo"><svg viewBox="0 0 32 32" aria-hidden="true"><rect x="1.5" y="1.5" width="29" height="29" rx="7" fill="none" stroke="currentColor" stroke-width="2.4"/><path d="M9 23 22 10" stroke="var(--mv-accent)" stroke-width="3" stroke-linecap="round"/><path d="M9 23h8" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"/></svg>Quillwork <span class="mv-navbar-tag">4.2</span></a>
<nav class="mv-navbar-nav" aria-label="Main navigation">
<ul class="mv-navbar-links">
<li>
<button class="mv-navbar-link" type="button" popovertarget="nb-bar-product" aria-haspopup="true">Product <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></button>
<div popover id="nb-bar-product" class="mv-navbar-mega" aria-label="Product" style="--mv-navbar-mega-width:min(43rem, calc(100vw - 1rem))">
<div class="mv-navbar-mega-grid">
<p class="mv-navbar-mega-label" style="grid-column:1 / 3">Platform</p>
<a class="mv-navbar-mega-item" href="#navbar-demo"><span class="mv-navbar-mega-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 20h4L19 9l-4-4L4 16z"/><path d="m13.5 6.5 4 4"/></svg></span><span><strong>Editor</strong><small>Write docs next to the code</small></span></a>
<a class="mv-navbar-mega-item" href="#navbar-demo"><span class="mv-navbar-mega-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 5h16v11H9l-5 4z"/><path d="M8 9h8M8 12h5"/></svg></span><span><strong>Review</strong><small>Suggest edits line by line</small></span></a>
<a class="mv-navbar-mega-item" href="#navbar-demo"><span class="mv-navbar-mega-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="6.5"/><path d="m20 20-4.2-4.2"/></svg></span><span><strong>Search</strong><small>Answers across every repo</small></span></a>
<a class="mv-navbar-mega-item" href="#navbar-demo"><span class="mv-navbar-mega-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3v12M7 8l5-5 5 5"/><path d="M4 15v4a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-4"/></svg></span><span><strong>Publishing</strong><small>Versioned sites in one push</small></span></a>
<a class="mv-navbar-mega-item" href="#navbar-demo"><span class="mv-navbar-mega-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 20V10M10 20V4M16 20v-7M22 20H2"/></svg></span><span><strong>Insights</strong><small>Spot pages that went stale</small></span></a>
<a class="mv-navbar-mega-item" href="#navbar-demo"><span class="mv-navbar-mega-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 3v5M15 3v5M6 8h12v3a6 6 0 0 1-12 0zM12 17v4"/></svg></span><span><strong>Integrations</strong><small>GitHub, Linear, Slack + 40</small></span></a>
<a class="mv-navbar-mega-feature" href="#navbar-demo">
<time datetime="2026-09">Release 4.2 · Sep 2026</time>
<strong>Docs that notice when the code moves</strong>
<small>Quillwork now flags every page whose snippets drifted from the main branch.</small>
<span class="mv-navbar-mega-cta">Read the changelog →</span>
</a>
</div>
<div class="mv-navbar-mega-foot"><span>Free forever for open-source projects.</span><a href="#navbar-demo">Apply for a grant →</a></div>
</div>
</li>
<li>
<button class="mv-navbar-link" type="button" popovertarget="nb-bar-solutions" aria-haspopup="true">Solutions <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></button>
<div popover id="nb-bar-solutions" class="mv-navbar-mega" aria-label="Solutions" style="--mv-navbar-mega-width:min(30rem, calc(100vw - 1rem))">
<div class="mv-navbar-mega-grid">
<p class="mv-navbar-mega-label">By team</p>
<a class="mv-navbar-mega-item" href="#navbar-demo"><span class="mv-navbar-mega-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 3 9 5-9 5-9-5z"/><path d="m3 13 9 5 9-5"/></svg></span><span><strong>Platform teams</strong><small>One source of truth for internal tools</small></span></a>
<a class="mv-navbar-mega-item" href="#navbar-demo"><span class="mv-navbar-mega-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m8 8-4 4 4 4M16 8l4 4-4 4M13.5 5l-3 14"/></svg></span><span><strong>API providers</strong><small>References generated from your schema</small></span></a>
<a class="mv-navbar-mega-item" href="#navbar-demo"><span class="mv-navbar-mega-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 10v4h3l6 4V6L7 10z"/><path d="M17 9a4 4 0 0 1 0 6"/></svg></span><span><strong>Developer relations</strong><small>Tutorials that stay runnable</small></span></a>
<a class="mv-navbar-mega-item" href="#navbar-demo"><span class="mv-navbar-mega-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 21V5l8-2v18M12 8h8v13M8 8v.01M8 12v.01M8 16v.01M16 12v.01M16 16v.01"/></svg></span><span><strong>Enterprise</strong><small>SSO, audit log and data residency</small></span></a>
</div>
</div>
</li>
<li>
<button class="mv-navbar-link" type="button" popovertarget="nb-bar-resources" aria-haspopup="true">Resources <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></button>
<div popover id="nb-bar-resources" class="mv-navbar-mega" aria-label="Resources" style="--mv-navbar-mega-width:min(24rem, calc(100vw - 1rem))">
<div class="mv-navbar-mega-grid" style="grid-template-columns:1fr">
<p class="mv-navbar-mega-label">Learn</p>
<a class="mv-navbar-mega-item" href="#navbar-demo"><span class="mv-navbar-mega-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 5a2 2 0 0 1 2-2h13v16H6a2 2 0 0 0-2 2z"/><path d="M4 19V5M9 7h6"/></svg></span><span><strong>Guides</strong><small>From first page to style guide</small></span></a>
<a class="mv-navbar-mega-item" href="#navbar-demo"><span class="mv-navbar-mega-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="3" width="7" height="7" rx="1.5"/><rect x="3" y="14" width="7" height="7" rx="1.5"/><rect x="14" y="14" width="7" height="7" rx="1.5"/></svg></span><span><strong>Templates</strong><small>38 starters for READMEs, RFCs and runbooks</small></span></a>
<a class="mv-navbar-mega-item" href="#navbar-demo"><span class="mv-navbar-mega-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="9" cy="8" r="3.5"/><path d="M2.5 20a6.5 6.5 0 0 1 13 0M16 4.5a3.5 3.5 0 0 1 0 7M18 14.5a6.5 6.5 0 0 1 3.5 5.5"/></svg></span><span><strong>Community</strong><small>4,800 writers on the forum</small></span></a>
</div>
<div class="mv-navbar-mega-foot"><span>Office hours every Thursday</span><a href="#navbar-demo">Book a slot →</a></div>
</div>
</li>
<li><a class="mv-navbar-link" href="#navbar-demo" aria-current="page">Pricing</a></li>
<li><a class="mv-navbar-link" href="#navbar-demo">Changelog <span class="mv-navbar-count">12</span></a></li>
</ul>
</nav>
<div class="mv-navbar-actions">
<a class="mv-button" data-variant="ghost" data-size="sm" href="#navbar-demo" data-desktop>Sign in</a>
<a class="mv-button" data-size="sm" href="#navbar-demo">Start writing</a>
<mv-dialog>
<button class="mv-button mv-navbar-toggle" data-variant="ghost" data-size="icon" data-mv-open aria-label="Open menu">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M4 8h16M4 16h16"/></svg>
</button>
<dialog data-variant="sheet" data-side="right" aria-label="Menu">
<div class="mv-navbar-sheet">
<button class="mv-dialog-close" data-mv-close aria-label="Close menu"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12"/></svg></button>
<a class="mv-navbar-brand" href="#navbar-demo"><svg viewBox="0 0 32 32" aria-hidden="true"><rect x="1.5" y="1.5" width="29" height="29" rx="7" fill="none" stroke="currentColor" stroke-width="2.4"/><path d="M9 23 22 10" stroke="var(--mv-accent)" stroke-width="3" stroke-linecap="round"/><path d="M9 23h8" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"/></svg>Quillwork</a>
<nav aria-label="Main navigation (mobile)">
<ul class="mv-navbar-sheet-links">
<li>
<details>
<summary>Product</summary>
<ul>
<li><a href="#navbar-demo">Editor</a></li>
<li><a href="#navbar-demo">Review</a></li>
<li><a href="#navbar-demo">Search</a></li>
<li><a href="#navbar-demo">Publishing</a></li>
<li><a href="#navbar-demo">Insights</a></li>
<li><a href="#navbar-demo">Integrations</a></li>
</ul>
</details>
</li>
<li>
<details>
<summary>Solutions</summary>
<ul>
<li><a href="#navbar-demo">Platform teams</a></li>
<li><a href="#navbar-demo">API providers</a></li>
<li><a href="#navbar-demo">Developer relations</a></li>
<li><a href="#navbar-demo">Enterprise</a></li>
</ul>
</details>
</li>
<li><a href="#navbar-demo">Resources</a></li>
<li><a href="#navbar-demo" aria-current="page">Pricing</a></li>
<li><a href="#navbar-demo">Changelog</a></li>
</ul>
</nav>
<div class="mv-navbar-sheet-actions">
<a class="mv-button" data-variant="outline" href="#navbar-demo">Sign in</a>
<a class="mv-button" href="#navbar-demo">Start writing</a>
<p class="mv-navbar-sheet-note">Free for teams up to 5 · no card</p>
</div>
</div>
</dialog>
</mv-dialog>
</div>
</div>
</header>
</mv-navbar>
<div class="nd-hero">
<p class="nd-eyebrow">Docs platform · 4.2</p>
<h2>One panel under the bar, resized for every menu</h2>
<p>Hover Product, then slide to Solutions and Resources: the panel stays docked, changes size, and the content glides in from the side you came from. The accent rule on the bar follows the open menu.</p>
</div>
<div class="nd-grid">
<div class="nd-card"><span class="nd-n">01</span><strong>Write where you ship</strong><i></i><i></i><i style="width:60%"></i></div>
<div class="nd-card"><span class="nd-n">02</span><strong>Review like code</strong><i></i><i></i><i style="width:45%"></i></div>
<div class="nd-card"><span class="nd-n">03</span><strong>Publish on merge</strong><i></i><i></i><i style="width:70%"></i></div>
<div class="nd-card"><span class="nd-n">04</span><strong>Know what went stale</strong><i></i><i></i><i style="width:55%"></i></div>
</div>
<div class="nd-band"></div>
</div>
</div>
<!-- ═════════ Floating ═════════ -->
<div role="tabpanel" data-value="floating">
<div class="nd-page" tabindex="0" aria-label="Scrollable demo page (floating bar)">
<mv-navbar>
<header class="mv-navbar" data-variant="floating">
<div class="mv-navbar-inner">
<a class="mv-navbar-brand" href="#navbar-demo"><svg viewBox="0 0 32 32" aria-hidden="true"><rect x="1.5" y="1.5" width="29" height="29" rx="7" fill="none" stroke="currentColor" stroke-width="2.4"/><path d="M9 23 22 10" stroke="var(--mv-accent)" stroke-width="3" stroke-linecap="round"/><path d="M9 23h8" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"/></svg>Quillwork <span class="mv-navbar-tag">4.2</span></a>
<nav class="mv-navbar-nav" aria-label="Main navigation (floating)">
<ul class="mv-navbar-links">
<li>
<button class="mv-navbar-link" type="button" popovertarget="nb-float-product" aria-haspopup="true">Product <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></button>
<div popover id="nb-float-product" class="mv-navbar-mega" aria-label="Product" style="--mv-navbar-mega-width:min(43rem, calc(100vw - 1rem))">
<div class="mv-navbar-mega-grid">
<p class="mv-navbar-mega-label" style="grid-column:1 / 3">Platform</p>
<a class="mv-navbar-mega-item" href="#navbar-demo"><span class="mv-navbar-mega-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 20h4L19 9l-4-4L4 16z"/><path d="m13.5 6.5 4 4"/></svg></span><span><strong>Editor</strong><small>Write docs next to the code</small></span></a>
<a class="mv-navbar-mega-item" href="#navbar-demo"><span class="mv-navbar-mega-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 5h16v11H9l-5 4z"/><path d="M8 9h8M8 12h5"/></svg></span><span><strong>Review</strong><small>Suggest edits line by line</small></span></a>
<a class="mv-navbar-mega-item" href="#navbar-demo"><span class="mv-navbar-mega-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="6.5"/><path d="m20 20-4.2-4.2"/></svg></span><span><strong>Search</strong><small>Answers across every repo</small></span></a>
<a class="mv-navbar-mega-item" href="#navbar-demo"><span class="mv-navbar-mega-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3v12M7 8l5-5 5 5"/><path d="M4 15v4a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-4"/></svg></span><span><strong>Publishing</strong><small>Versioned sites in one push</small></span></a>
<a class="mv-navbar-mega-item" href="#navbar-demo"><span class="mv-navbar-mega-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 20V10M10 20V4M16 20v-7M22 20H2"/></svg></span><span><strong>Insights</strong><small>Spot pages that went stale</small></span></a>
<a class="mv-navbar-mega-item" href="#navbar-demo"><span class="mv-navbar-mega-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 3v5M15 3v5M6 8h12v3a6 6 0 0 1-12 0zM12 17v4"/></svg></span><span><strong>Integrations</strong><small>GitHub, Linear, Slack + 40</small></span></a>
<a class="mv-navbar-mega-feature" href="#navbar-demo">
<time datetime="2026-09">Release 4.2 · Sep 2026</time>
<strong>Docs that notice when the code moves</strong>
<small>Quillwork now flags every page whose snippets drifted from the main branch.</small>
<span class="mv-navbar-mega-cta">Read the changelog →</span>
</a>
</div>
<div class="mv-navbar-mega-foot"><span>Free forever for open-source projects.</span><a href="#navbar-demo">Apply for a grant →</a></div>
</div>
</li>
<li><a class="mv-navbar-link" href="#navbar-demo">Solutions</a></li>
<li><a class="mv-navbar-link" href="#navbar-demo">Resources</a></li>
<li><a class="mv-navbar-link" href="#navbar-demo" aria-current="page">Pricing</a></li>
<li><a class="mv-navbar-link" href="#navbar-demo">Changelog <span class="mv-navbar-count">12</span></a></li>
</ul>
</nav>
<div class="mv-navbar-actions">
<a class="mv-button" data-variant="ghost" data-size="sm" href="#navbar-demo" data-desktop>Sign in</a>
<a class="mv-button" data-size="sm" href="#navbar-demo">Start writing</a>
<mv-dialog>
<button class="mv-button mv-navbar-toggle" data-variant="ghost" data-size="icon" data-mv-open aria-label="Open menu">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M4 8h16M4 16h16"/></svg>
</button>
<dialog data-variant="sheet" data-side="right" aria-label="Menu">
<div class="mv-navbar-sheet">
<button class="mv-dialog-close" data-mv-close aria-label="Close menu"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12"/></svg></button>
<a class="mv-navbar-brand" href="#navbar-demo"><svg viewBox="0 0 32 32" aria-hidden="true"><rect x="1.5" y="1.5" width="29" height="29" rx="7" fill="none" stroke="currentColor" stroke-width="2.4"/><path d="M9 23 22 10" stroke="var(--mv-accent)" stroke-width="3" stroke-linecap="round"/><path d="M9 23h8" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"/></svg>Quillwork</a>
<nav aria-label="Main navigation (floating, mobile)">
<ul class="mv-navbar-sheet-links">
<li>
<details>
<summary>Product</summary>
<ul>
<li><a href="#navbar-demo">Editor</a></li>
<li><a href="#navbar-demo">Review</a></li>
<li><a href="#navbar-demo">Search</a></li>
<li><a href="#navbar-demo">Publishing</a></li>
<li><a href="#navbar-demo">Insights</a></li>
<li><a href="#navbar-demo">Integrations</a></li>
</ul>
</details>
</li>
<li>
<details>
<summary>Solutions</summary>
<ul>
<li><a href="#navbar-demo">Platform teams</a></li>
<li><a href="#navbar-demo">API providers</a></li>
<li><a href="#navbar-demo">Developer relations</a></li>
<li><a href="#navbar-demo">Enterprise</a></li>
</ul>
</details>
</li>
<li><a href="#navbar-demo">Resources</a></li>
<li><a href="#navbar-demo" aria-current="page">Pricing</a></li>
<li><a href="#navbar-demo">Changelog</a></li>
</ul>
</nav>
<div class="mv-navbar-sheet-actions">
<a class="mv-button" data-variant="outline" href="#navbar-demo">Sign in</a>
<a class="mv-button" href="#navbar-demo">Start writing</a>
<p class="mv-navbar-sheet-note">Free for teams up to 5 · no card</p>
</div>
</div>
</dialog>
</mv-dialog>
</div>
</div>
</header>
</mv-navbar>
<div class="nd-hero">
<p class="nd-eyebrow">Scroll down ↓</p>
<h2>Flat at the top, a card once you scroll</h2>
<p>Scroll this page: the bar lifts off the edge, insets itself and picks up a border, a blur and a soft shadow. Product opens a classic menu anchored to its button.</p>
</div>
<div class="nd-grid">
<div class="nd-card"><span class="nd-n">01</span><strong>Write where you ship</strong><i></i><i></i><i style="width:60%"></i></div>
<div class="nd-card"><span class="nd-n">02</span><strong>Review like code</strong><i></i><i></i><i style="width:45%"></i></div>
<div class="nd-card"><span class="nd-n">03</span><strong>Publish on merge</strong><i></i><i></i><i style="width:70%"></i></div>
<div class="nd-card"><span class="nd-n">04</span><strong>Know what went stale</strong><i></i><i></i><i style="width:55%"></i></div>
</div>
<div class="nd-band"></div>
</div>
</div>
<!-- ═════════ Stacked ═════════ -->
<div role="tabpanel" data-value="stacked">
<div class="nd-page" tabindex="0" aria-label="Scrollable demo page (stacked bar)">
<mv-navbar>
<header class="mv-navbar" data-variant="stacked" data-mega="viewport">
<div class="mv-navbar-inner">
<a class="mv-navbar-brand" href="#navbar-demo"><svg viewBox="0 0 32 32" aria-hidden="true"><rect x="1.5" y="1.5" width="29" height="29" rx="7" fill="none" stroke="currentColor" stroke-width="2.4"/><path d="M9 23 22 10" stroke="var(--mv-accent)" stroke-width="3" stroke-linecap="round"/><path d="M9 23h8" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"/></svg>Quillwork <span class="mv-navbar-tag">4.2</span></a>
<form class="mv-navbar-search" role="search" onsubmit="event.preventDefault()">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="6.5"/><path d="m20 20-4.2-4.2"/></svg>
<input class="mv-input" data-size="sm" type="search" placeholder="Search 1,240 pages" aria-label="Search the docs" data-hotkey="/">
<kbd class="mv-kbd">/</kbd>
</form>
<div class="mv-navbar-actions">
<a class="mv-button" data-variant="ghost" data-size="sm" href="#navbar-demo" data-desktop>Sign in</a>
<a class="mv-button" data-size="sm" href="#navbar-demo">Start writing</a>
<mv-dialog>
<button class="mv-button mv-navbar-toggle" data-variant="ghost" data-size="icon" data-mv-open aria-label="Open menu">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M4 8h16M4 16h16"/></svg>
</button>
<dialog data-variant="sheet" data-side="right" aria-label="Menu">
<div class="mv-navbar-sheet">
<button class="mv-dialog-close" data-mv-close aria-label="Close menu"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12"/></svg></button>
<a class="mv-navbar-brand" href="#navbar-demo"><svg viewBox="0 0 32 32" aria-hidden="true"><rect x="1.5" y="1.5" width="29" height="29" rx="7" fill="none" stroke="currentColor" stroke-width="2.4"/><path d="M9 23 22 10" stroke="var(--mv-accent)" stroke-width="3" stroke-linecap="round"/><path d="M9 23h8" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"/></svg>Quillwork</a>
<form class="mv-navbar-search" role="search" style="display:flex;max-width:none" onsubmit="event.preventDefault()">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="6.5"/><path d="m20 20-4.2-4.2"/></svg>
<input class="mv-input" type="search" placeholder="Search the docs" aria-label="Search the docs">
</form>
<nav aria-label="Main navigation (stacked, mobile)">
<ul class="mv-navbar-sheet-links">
<li>
<details>
<summary>Product</summary>
<ul>
<li><a href="#navbar-demo">Editor</a></li>
<li><a href="#navbar-demo">Review</a></li>
<li><a href="#navbar-demo">Search</a></li>
<li><a href="#navbar-demo">Publishing</a></li>
<li><a href="#navbar-demo">Insights</a></li>
<li><a href="#navbar-demo">Integrations</a></li>
</ul>
</details>
</li>
<li>
<details>
<summary>Solutions</summary>
<ul>
<li><a href="#navbar-demo">Platform teams</a></li>
<li><a href="#navbar-demo">API providers</a></li>
<li><a href="#navbar-demo">Developer relations</a></li>
<li><a href="#navbar-demo">Enterprise</a></li>
</ul>
</details>
</li>
<li><a href="#navbar-demo">Resources</a></li>
<li><a href="#navbar-demo" aria-current="page">Pricing</a></li>
<li><a href="#navbar-demo">Changelog</a></li>
</ul>
</nav>
<div class="mv-navbar-sheet-actions">
<a class="mv-button" data-variant="outline" href="#navbar-demo">Sign in</a>
<a class="mv-button" href="#navbar-demo">Start writing</a>
<p class="mv-navbar-sheet-note">Free for teams up to 5 · no card</p>
</div>
</div>
</dialog>
</mv-dialog>
</div>
</div>
<div class="mv-navbar-sub">
<nav class="mv-navbar-nav" aria-label="Main navigation (stacked)">
<ul class="mv-navbar-links">
<li>
<button class="mv-navbar-link" type="button" popovertarget="nb-stack-product" aria-haspopup="true">Product <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></button>
<div popover id="nb-stack-product" class="mv-navbar-mega" aria-label="Product" style="--mv-navbar-mega-width:min(43rem, calc(100vw - 1rem))">
<div class="mv-navbar-mega-grid">
<p class="mv-navbar-mega-label" style="grid-column:1 / 3">Platform</p>
<a class="mv-navbar-mega-item" href="#navbar-demo"><span class="mv-navbar-mega-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 20h4L19 9l-4-4L4 16z"/><path d="m13.5 6.5 4 4"/></svg></span><span><strong>Editor</strong><small>Write docs next to the code</small></span></a>
<a class="mv-navbar-mega-item" href="#navbar-demo"><span class="mv-navbar-mega-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 5h16v11H9l-5 4z"/><path d="M8 9h8M8 12h5"/></svg></span><span><strong>Review</strong><small>Suggest edits line by line</small></span></a>
<a class="mv-navbar-mega-item" href="#navbar-demo"><span class="mv-navbar-mega-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="6.5"/><path d="m20 20-4.2-4.2"/></svg></span><span><strong>Search</strong><small>Answers across every repo</small></span></a>
<a class="mv-navbar-mega-item" href="#navbar-demo"><span class="mv-navbar-mega-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3v12M7 8l5-5 5 5"/><path d="M4 15v4a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-4"/></svg></span><span><strong>Publishing</strong><small>Versioned sites in one push</small></span></a>
<a class="mv-navbar-mega-item" href="#navbar-demo"><span class="mv-navbar-mega-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 20V10M10 20V4M16 20v-7M22 20H2"/></svg></span><span><strong>Insights</strong><small>Spot pages that went stale</small></span></a>
<a class="mv-navbar-mega-item" href="#navbar-demo"><span class="mv-navbar-mega-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 3v5M15 3v5M6 8h12v3a6 6 0 0 1-12 0zM12 17v4"/></svg></span><span><strong>Integrations</strong><small>GitHub, Linear, Slack + 40</small></span></a>
<a class="mv-navbar-mega-feature" href="#navbar-demo">
<time datetime="2026-09">Release 4.2 · Sep 2026</time>
<strong>Docs that notice when the code moves</strong>
<small>Quillwork now flags every page whose snippets drifted from the main branch.</small>
<span class="mv-navbar-mega-cta">Read the changelog →</span>
</a>
</div>
<div class="mv-navbar-mega-foot"><span>Free forever for open-source projects.</span><a href="#navbar-demo">Apply for a grant →</a></div>
</div>
</li>
<li>
<button class="mv-navbar-link" type="button" popovertarget="nb-stack-solutions" aria-haspopup="true">Solutions <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></button>
<div popover id="nb-stack-solutions" class="mv-navbar-mega" aria-label="Solutions" style="--mv-navbar-mega-width:min(30rem, calc(100vw - 1rem))">
<div class="mv-navbar-mega-grid">
<p class="mv-navbar-mega-label">By team</p>
<a class="mv-navbar-mega-item" href="#navbar-demo"><span class="mv-navbar-mega-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 3 9 5-9 5-9-5z"/><path d="m3 13 9 5 9-5"/></svg></span><span><strong>Platform teams</strong><small>One source of truth for internal tools</small></span></a>
<a class="mv-navbar-mega-item" href="#navbar-demo"><span class="mv-navbar-mega-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m8 8-4 4 4 4M16 8l4 4-4 4M13.5 5l-3 14"/></svg></span><span><strong>API providers</strong><small>References generated from your schema</small></span></a>
<a class="mv-navbar-mega-item" href="#navbar-demo"><span class="mv-navbar-mega-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 10v4h3l6 4V6L7 10z"/><path d="M17 9a4 4 0 0 1 0 6"/></svg></span><span><strong>Developer relations</strong><small>Tutorials that stay runnable</small></span></a>
<a class="mv-navbar-mega-item" href="#navbar-demo"><span class="mv-navbar-mega-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 21V5l8-2v18M12 8h8v13M8 8v.01M8 12v.01M8 16v.01M16 12v.01M16 16v.01"/></svg></span><span><strong>Enterprise</strong><small>SSO, audit log and data residency</small></span></a>
</div>
</div>
</li>
<li>
<button class="mv-navbar-link" type="button" popovertarget="nb-stack-resources" aria-haspopup="true">Resources <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></button>
<div popover id="nb-stack-resources" class="mv-navbar-mega" aria-label="Resources" style="--mv-navbar-mega-width:min(24rem, calc(100vw - 1rem))">
<div class="mv-navbar-mega-grid" style="grid-template-columns:1fr">
<p class="mv-navbar-mega-label">Learn</p>
<a class="mv-navbar-mega-item" href="#navbar-demo"><span class="mv-navbar-mega-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 5a2 2 0 0 1 2-2h13v16H6a2 2 0 0 0-2 2z"/><path d="M4 19V5M9 7h6"/></svg></span><span><strong>Guides</strong><small>From first page to style guide</small></span></a>
<a class="mv-navbar-mega-item" href="#navbar-demo"><span class="mv-navbar-mega-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="3" width="7" height="7" rx="1.5"/><rect x="3" y="14" width="7" height="7" rx="1.5"/><rect x="14" y="14" width="7" height="7" rx="1.5"/></svg></span><span><strong>Templates</strong><small>38 starters for READMEs, RFCs and runbooks</small></span></a>
<a class="mv-navbar-mega-item" href="#navbar-demo"><span class="mv-navbar-mega-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="9" cy="8" r="3.5"/><path d="M2.5 20a6.5 6.5 0 0 1 13 0M16 4.5a3.5 3.5 0 0 1 0 7M18 14.5a6.5 6.5 0 0 1 3.5 5.5"/></svg></span><span><strong>Community</strong><small>4,800 writers on the forum</small></span></a>
</div>
<div class="mv-navbar-mega-foot"><span>Office hours every Thursday</span><a href="#navbar-demo">Book a slot →</a></div>
</div>
</li>
<li><a class="mv-navbar-link" href="#navbar-demo" aria-current="page">Pricing</a></li>
<li><a class="mv-navbar-link" href="#navbar-demo">Changelog <span class="mv-navbar-count">12</span></a></li>
</ul>
</nav>
<p class="mv-navbar-sub-note">v4.2 shipped Sep 18 · <a href="#navbar-demo">What changed</a></p>
</div>
</header>
</mv-navbar>
<div class="nd-hero">
<p class="nd-eyebrow">Stacked layout</p>
<h2>Search first, sections underneath</h2>
<p>For docs and stores with a lot to browse: brand, search and account on top, sections on a second row. Press / to jump to the search field.</p>
</div>
<div class="nd-grid">
<div class="nd-card"><span class="nd-n">01</span><strong>Write where you ship</strong><i></i><i></i><i style="width:60%"></i></div>
<div class="nd-card"><span class="nd-n">02</span><strong>Review like code</strong><i></i><i></i><i style="width:45%"></i></div>
<div class="nd-card"><span class="nd-n">03</span><strong>Publish on merge</strong><i></i><i></i><i style="width:70%"></i></div>
<div class="nd-card"><span class="nd-n">04</span><strong>Know what went stale</strong><i></i><i></i><i style="width:55%"></i></div>
</div>
<div class="nd-band"></div>
</div>
</div>
</mv-tabs>API
Attributes
Name Type Default Description thresholdnumber 8On <mv-navbar>: scroll distance (px) past which data-scrolled is set. data-scrolledboolean Set by the JS on .mv-navbar: translucent blurred background and bottom rule (floating: the bar detaches into a card). Can be set by hand. data-variantfloating | stacked (full-width bar)On .mv-navbar. floating: flat at the top, then inset by --mv-navbar-inset with a border, blur, radius and shadow once scrolled. stacked: brand, .mv-navbar-search and actions on a first row, the links in a second .mv-navbar-sub row (from 54rem). data-megaviewport On .mv-navbar: every mega menu is moved into ONE viewport docked under the start of the link list; it resizes to the active panel and the content slides in from the direction of travel. Opens on hover (short delay), click or ↓; Tab enters the panel and resumes after its trigger; Esc / outside click close it. Same popovertarget markup as the standard mode. "slide" is accepted as an alias. data-mega-offsetnumber 8With data-mega="viewport": gap (px) between the bar and the viewport. data-desktop / data-mobileboolean On a child of .mv-navbar-actions: visible only when wide / narrow. data-hotkeystring On the search <input>: key that focuses it from anywhere on the page (e.g. "/"), ignored while typing in a field.
Methods
Name Description openMega(trigger, { focus })data-mega="viewport": opens (or switches) the viewport to the trigger's panel; focus=true moves focus to its first link. closeMega({ focus })Closes the shared viewport.
Events
Name Description mv-mega-opendata-mega="viewport": the viewport opened. detail: { trigger }. mv-mega-closeThe shared viewport closed.
Content structure
Name Description .mv-navbar-inner-brand (optional .mv-navbar-tag mono version tag), nav.mv-navbar-nav (ul.mv-navbar-links of .mv-navbar-link, optional .mv-navbar-count), optional form.mv-navbar-search[role=search], -actions. [popovertarget] + [popover].mv-navbar-megaMega menu: .mv-navbar-link button with popovertarget="id" + <div popover id> .mv-navbar-mega > -mega-grid (-mega-label mono column heading, -mega-item with -mega-icon, <strong>, <small>; -mega-feature note card with <time>, <strong>, <small>, -mega-cta) and an optional -mega-foot strip. Width per panel via --mv-navbar-mega-width. navbar.js anchors it under the button, syncs aria-expanded, moves the indicator and closes it when a link is followed. data-placement changes the side. .mv-navbar-subStacked variant: second row holding nav.mv-navbar-nav and an optional .mv-navbar-sub-note (mono release note). <mv-dialog> + .mv-navbar-toggleBurger button (hidden from a 54rem container) + <dialog data-variant="sheet"> containing .mv-navbar-sheet (-sheet-links: numbered rows, <details> for submenus; -sheet-actions; -sheet-note).
CSS classes
Name Description mv-navbarOn <header>: sticky (top: --mv-navbar-top), mv-navbar query container. mv-navbar-indicatorCreated by navbar.js: 2px accent rule on the bar's lower edge under the open trigger, gliding between triggers.
CSS variables
Name Default Description --mv-navbar-h4rem (floating: 3.5rem, stacked: 3.75rem)Bar height. --mv-navbar-max72remMax content width. --mv-navbar-top0pxSticky offset. --mv-navbar-inset0.75remFloating variant: how far the card detaches from the edges once scrolled. --mv-navbar-mega-widthmin(42rem, 100vw - 1rem)Mega menu width (set it per panel). --mv-navbar-glide280msDuration of the indicator glide and of the viewport resize.
Accessibility
Labeled <header> and <nav> landmarks. ←/→/Home/End move between top-level links. Mega menus are native popovers (top layer, Esc, outside click, tab order after the button, synced aria-expanded); in viewport mode panels are labeled regions, inert while hidden, ↓ or Tab enters the open panel and Esc returns focus to its trigger. The search is a labeled role="search" form. The mobile drawer is a modal <dialog> (focus trap, Esc, closes when a link is followed); submenus use <details>. Current link via aria-current="page". The indicator is aria-hidden; transitions collapse under reduced motion.