Navbar <mv-navbar>
Barra de navegación editorial fija que se difumina al desplazarte: etiquetas y contadores monoespaciados, megamenús en popover con una regla de acento en la barra que marca el menú abierto, un viewport compartido opcional que cambia de tamaño entre menús, un modo flotante que se separa en forma de tarjeta al desplazarte y un layout apilado de búsqueda + secciones; panel lateral para dispositivos móviles basado en dialog con enlaces numerados.
Categoría Bloques Tipo Bloque (sección lista para usar) (<mv-navbar>) Estado estable También instala 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
Consigue Navbar. Incluido en todos los planes: el Pro pack trae los 317 componentes, con la CLI y el servidor MCP que se usan abajo.
Ver planes
Instalación
node scripts/add.mjs navbar --out ./src/marvelousAgente de IA con el servidor MCP de Marvelous UI: install_components({ slugs: ["navbar"], target_dir: "<absolute path>/src/marvelous", framework: "react" }).
Archivos copiados (dependencias incluidas): 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.
Uso
Marcado de referencia: parte de él y personalízalo con atributos, data-* y variables CSS:
<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 Tipo 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.