# Navbar

> Four site headers — a glass pill that springs wider on scroll, a full-width mega menu with sliding panels, a morphing preview dropdown and a minimal header with a side sheet — each with a working mobile menu.

- Collection: Blocks
- Tier: pro
- Docs: https://geturui.com/docs/navbar
- Install: `npx shadcn@latest add @geturui-pro/navbar`
- Dependencies: motion, lucide-react

## Variants

### Pill

Floating glass pill that springs wider once you scroll, revealing a CTA and a reading-progress line; links share a gliding hover highlight.

Install: `npx shadcn@latest add @geturui-pro/navbar-pill`

```tsx
import { NavbarPill } from "@/components/blocks/navbar/pill";

export default function Header() {
  return (
    <NavbarPill
      brand="Relay"
      links={[
        { label: "Product", href: "#product" },
        { label: "Pricing", href: "#pricing" },
        { label: "Docs", href: "/docs" },
      ]}
      activeHref="#product"
      cta={{ label: "Start free", href: "/signup" }}
      threshold={40}
    />
  );
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| brand | `string` | "Relay" | Product name; its first letter becomes the mark. |
| links | `{ label: string; href: string }[]` | — | Primary links shown in the pill and the mobile menu. |
| activeHref | `string` | — | Href of the current page; gets aria-current and a volt dot. |
| cta | `{ label: string; href: string }` | — | Call to action revealed when the pill expands. |
| secondary | `{ label: string; href: string }` | — | Quiet link such as Sign in. |
| threshold | `number` | 40 | Pixels scrolled before the pill expands. |
| scrollContainer | `RefObject<HTMLElement | null>` | — | Watch this element's scroll instead of the window. |
| className | `string` | — | Classes for the sticky header wrapper. |

### Mega menu

Full-width header whose sections open one shared panel that slides left or right between sections, with a link grid and a feature card per section.

Install: `npx shadcn@latest add @geturui-pro/navbar-mega-menu`

```tsx
import { NavbarMegaMenu } from "@/components/blocks/navbar/mega-menu";

export default function Header() {
  return <NavbarMegaMenu brand="Relay" cta={{ label: "Start free", href: "/signup" }} />;
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| brand | `string` | "Relay" | Product name beside the mark. |
| sections | `MegaMenuSection[]` | — | { id, label, heading, links: { label, description, href, icon? }[], feature: { eyebrow, title, body, href, cta } }. |
| links | `{ label: string; href: string }[]` | — | Plain links after the section triggers. |
| cta | `{ label: string; href: string }` | — | Primary button on the right. |
| secondary | `{ label: string; href: string }` | — | Quiet link such as Sign in. |
| className | `string` | — | Classes for the header. |

### Morphing

Centered nav whose single preview panel morphs its width, height and position between items while each item's feature preview crossfades in.

Install: `npx shadcn@latest add @geturui-pro/navbar-morphing`

```tsx
import { NavbarMorphing } from "@/components/blocks/navbar/morphing";

export default function Header() {
  return <NavbarMorphing brand="Halcyon" cta={{ label: "Book a demo", href: "/demo" }} />;
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| brand | `string` | "Halcyon" | Product name beside the mark. |
| items | `NavbarMorphingItem[]` | — | { id, label, title, body, preview: "canvas" | "agent" | "chart" | "security", width, links }. width sets the panel size in px. |
| cta | `{ label: string; href: string }` | — | Button on the right. |
| className | `string` | — | Classes for the header. |

### Simple

Minimal header with a sliding volt underline on links and a focus-trapped side sheet on small containers.

Install: `npx shadcn@latest add @geturui-pro/navbar-simple`

```tsx
import { NavbarSimple } from "@/components/blocks/navbar/simple";

export default function Header() {
  return (
    <NavbarSimple
      brand="Tidepool"
      activeHref="/features"
      links={[
        { label: "Features", href: "/features" },
        { label: "Pricing", href: "/pricing" },
      ]}
      cta={{ label: "Get the app", href: "/download" }}
    />
  );
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| brand | `string` | "Tidepool" | Product name beside the wave mark. |
| links | `{ label: string; href: string }[]` | — | Primary links. |
| activeHref | `string` | — | Href of the current page; the underline rests here. |
| cta | `{ label: string; href: string }` | — | Primary button. |
| secondary | `{ label: string; href: string }` | — | Quiet link such as Log in. |
| sheetNote | `string` | — | Line at the bottom of the mobile sheet. |
| sheetStrategy | `"fixed" | "absolute"` | "fixed" | fixed covers the viewport; absolute stays inside the nearest positioned ancestor. |
| className | `string` | — | Classes for the header. |

## Accessibility

- Menu triggers are real buttons with aria-expanded and aria-controls; Escape closes any open panel or menu and returns focus to its trigger.
- Arrow Down on a desktop trigger opens its panel and moves focus to the first link; outside clicks close panels.
- The mobile sheet is a modal dialog that traps Tab, and every spring falls back to a fade under reduced motion.

## Source

Pro item — send `Authorization: Bearer <registry token>` to include the source.