Components / Minimal Nav
Live preview — rendered in this site's theme
Minimal Nav
Usage
A quiet sticky header: wordmark left, links center, actions right. Underline-on-hover instead of pill highlights keeps it editorial.
Rules
- Height fixed at 64px (
h-16); sticky with translucent blur over content.
- Active link gets
border-b border-primary — color, not weight.
- Mobile menu uses
<details> (zero JS). Position the panel absolutely and give it z-50.
- One utility link (mono, dimmed) before the CTA adds agent-friendliness without clutter.
Accessibility
- Landmark roles come free from
<header>/<nav>.
- Keep tap targets ≥ 40px; the summary button inherits
.btn sizing.
HTML Copy-paste source
<header class="sticky top-0 z-40 backdrop-blur bg-base-100/85 border-b border-base-content/10">
<div class="max-w-6xl mx-auto px-6 h-16 flex items-center gap-6">
<a href="/" class="text-lg font-semibold tracking-tight">Wordmark<span class="text-primary">.</span></a>
<nav class="hidden md:flex gap-6 mx-auto text-sm text-base-content/70">
<a class="hover:text-base-content border-b border-transparent hover:border-primary py-1" href="#">Product</a>
<a class="hover:text-base-content border-b border-transparent hover:border-primary py-1" href="#">Pricing</a>
<a class="hover:text-base-content border-b border-transparent hover:border-primary py-1" href="#">Docs</a>
</nav>
<div class="ml-auto md:ml-0 flex items-center gap-3">
<a href="#" class="hidden sm:inline font-mono text-xs text-base-content/50 hover:text-accent">llms.txt</a>
<a href="#" class="btn btn-sm btn-primary border-0">Sign up</a>
<details class="md:hidden relative">
<summary class="btn btn-sm btn-ghost">Menu</summary>
<ul class="absolute right-0 top-12 menu bg-base-200 rounded-box w-44 z-50 shadow-xl">
<li><a>Product</a></li><li><a>Pricing</a></li><li><a>Docs</a></li>
</ul>
</details>
</div>
</div>
</header>