> From [PageWeave Design](https://pageweave-design.pageweave.site) — a working library for agentic web development. Full index: [llms.txt](https://pageweave-design.pageweave.site/llms.txt)

# Minimal Nav

Sticky header with underline hover states

- Category: Components
- Tags: navigation header sticky

## 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 source

```html
<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>
```