Sticky Nav Bar

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, with zero JavaScript. mode="hide" also slides it away on the way down and back on the way up (a measured script, in every engine), mode="static" keeps it still. An optional theme switch at its end and an optional announcement banner above it, in the same sticky header.

Measured

JavaScript of its own

0 B

With hide: 613 B raw of its own on the runtime, measured on its own fixture. The default above ships none of it.

CSS 15.1 kB raw including the base tokens. Measured from a production build, and again in CI for every change that can move it.

Browser support

Limited availability

Chrome 120 · not Firefox · Safari 26; needs scroll-timeline, property, mask-image. Elsewhere: a sticky bar with the hairline that does not condense (Firefox); hide works everywhere, since it is a script; on a phone the scrolling links get a static end fade.

Install Pro

The demo above is never gated; the source is. With a key in components.json (see account), the registry serves it like any other item:

terminal

npx shadcn@latest add @moonarc-pro/nav-bar

src/pages/index.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' }}
  mode="hide"
  themeToggle
/>

<style is:global>
  /* anchors and focused fields land under the bar, not behind it */
  html { scroll-padding-top: 5rem; }
</style>

Without a key the registry answers 401 with an upgrade message. Everything this section composes is free: theme-toggle.

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).
`mode`	`'condense' \| 'hide' \| 'static'`	`'condense'`	condense: the row tightens and the hairline appears over the first 120 px, CSS only. hide: the same, and past its own height the bar slides away while the page scrolls down and comes back when it scrolls up, at the top, and when focus or an open menu is inside it; an internal script of its own, measured on its own fixture, bound to the window or to the nearest scrolling ancestor. static: a sticky bar with its hairline, nothing bound to the scroll. Set scroll-padding-top on the page to the bar's height so anchors land under it.
`themeToggle`	`boolean`	`false`	Core ThemeToggle at the end of the actions, with its own name ("Theme: system"). It needs ThemeScript in the head, and without JavaScript it is hidden.
`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.

Theming and overrides

The section reads the theme contract (shadcn's variable names with the base tokens as fallback), so a pasted theme or one --ma-brand recolours it. Its class names are the override surface and stay stable; a named slot replaces the matching prop with your own markup.

Classes

.ma-banner.ma-navbar.ma-navbar__action.ma-navbar__actions.ma-navbar__banner.ma-navbar__brand.ma-navbar__inner.ma-navbar__links.ma-navbar__theme

Slots

slot="banner"slot="headline"slot="actions"

Reduced motion

Always condensed, hairline always on; hide never hides.

With `ClientRouter`

CSS-only by default; the new page's bar starts at its own scroll position. The hide script binds through the shared runtime: one scroll listener per bar, released before each swap and bound again after it.

Why it is built this way

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.
hide is a script because it needs the scroll direction, which CSS gives only through scroll-state queries in Chromium; it writes one attribute and the slide is a translate on the preset curve. A bar with focus inside, or with an open popover or menu, never hides, and a hidden bar stays in the tab order. It turns 24 px past the point where the reader turned, so the condensing bar's own shrink, which the page's scroll anchoring answers with a small move up, does not bring it back.
The banner slot takes a StickyBanner above the bar, inside the same header: two sticky boxes at top 0 would overlap, so the banner's own sticky position is off there and the header is the one sticky element. Its text and its dismissLabel are yours; StickyBanner is a free component of its own (sticky-banner).
On a phone the links take their own row and scroll sideways; while they overflow, the row's end fades out on its own scroll timeline, so the fade is gone once the last link is in view.

Replaces: Navbar (Tailwind Plus) · FloatingNav (Aceternity). See the migration table.

scroll inside

Line 1: the bar above tracks the scroll of this box.

Line 2: the bar above tracks the scroll of this box.

Line 3: the bar above tracks the scroll of this box.

Line 4: the bar above tracks the scroll of this box.

Line 5: the bar above tracks the scroll of this box.

Line 6: the bar above tracks the scroll of this box.

Line 7: the bar above tracks the scroll of this box.

Line 8: the bar above tracks the scroll of this box.

Line 9: the bar above tracks the scroll of this box.

Scroll Progress

Scroll

A hairline along the top of the viewport that fills as the page is read.

Chrome 115 · not Firefox · Safari 26scroll

Mega Menu

Pro

A menu bar whose panels open as popovers anchored under their triggers, columns revealing with a stagger, closing on Escape or outside click.

newly · Chrome 125 · Firefox 147 · Safari 26click

Also: view transitions · how costs are measured · browser support · accessibility policy · five-minute setup · MCP for agents · this page as Markdown