# Sticky Nav Bar (Moonarc)

A sticky navigation bar that condenses over the first 120 px of scroll: the row tightens and a hairline appears, bound to the document's scroll timeline. Zero JavaScript; where scroll timelines are missing it is a plain sticky bar with the hairline.

- Pro block. Install: `npx shadcn@latest add @moonarc-pro/nav-bar` (license key required)
- Tier B · category section · trigger scroll
- Readout: `<NavBar links={[…]} action={{…}}>`
- Browser support: limited (Chrome 115 · not Firefox · Safari 26); elsewhere: a sticky bar with the hairline that does not condense (Firefox)
- Measured cost: 0 B JS (CSS 7.6 kB raw)
- Page: https://moonarc.dev/components/nav-bar/

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `brand` | `{ href, label }` | none | Logo link. |
| `links` | `{ href, label, current? }[]` | none | Navigation links; current marks the active page. |
| `label` | `string` | `'Primary'` | Accessible name of the link nav. It must be unique per page, so change it when the bar is not the page's own (a preview, a second bar). |
| `action` | `{ href, label }` | none | Call to action at the end of the bar (the left in a right-to-left page). |
| `tone` | `'surface' | 'muted' | 'ink' | 'brand'` | `unset (translucent card)` | The ground: the page surface, a muted band, an always-dark ink panel, or a deep brand panel. Each paints --background, --ma-tone-muted (over --muted, with a --border hairline), --ma-tone-ink or --ma-tone-brand (over --primary) with the matching text. With theme.css, a painted tone also re-declares --card, --border, --input and --ring inside the section, so cards and fields follow the ground. Decoration is strongest on brand. |
| `density` | `'compact' | 'cozy' | 'roomy'` | `'cozy'` | Bar padding ×0.8 / ×1 / ×1.25 through --ma-density. |

## Usage

```astro
---
import NavBar from '@/components/moonarc/pro/NavBar.astro';
---
<NavBar
  brand={{ href: '/', label: 'Moonarc' }}
  links={[{ href: '/components/', label: 'Components', current: true }, { href: '/docs/', label: 'Docs' }]}
  action={{ href: '/setup/', label: 'Get started' }}
/>
```

## Reduced motion

Always condensed, hairline always on.

## With ClientRouter

CSS-only; the new page's bar starts at its own scroll position.

## Craft

- animation-range 0 → 120 px: the bar condenses exactly with the first scroll, reversibly, without a scroll listener.
- Only padding and a border colour animate; the bar never changes height abruptly.
- The backdrop blur is 12 px on an 80% panel so content scrolling beneath stays legible.

## Replaces

- Navbar (Tailwind Plus)
- FloatingNav (Aceternity)

## Source

Pro block. The source is served by the license-gated registry: `npx shadcn@latest add @moonarc-pro/nav-bar` with a key in components.json (https://moonarc.dev/account/).