# Navbar (goodtabs UI)

A site header with logo, links and actions that folds into a sheet on small screens.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/navbar.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/navbar`

## Usage

```tsx
import { Navbar } from "@/components/navbar"

<Navbar
  logo={<Link href="/" className="font-semibold">Acme</Link>}
  links={[
    { href: "/product", label: "Product", active: true },
    { href: "/pricing", label: "Pricing" },
  ]}
  actions={<Button size="sm">Start free</Button>}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| logo | `ReactNode` |  | Wordmark or logo, usually a link to the home page. |
| links | `{ href: string; label: string; active?: boolean }[]` | `[]` | Primary links. Hidden behind a menu button under md. |
| actions | `ReactNode` |  | Right side: buttons, theme toggle, avatar. |
| menuLabel | `string` | `"Menu"` | Accessible name of the mobile menu button and sheet. |
| sticky | `boolean` | `true` | Sticks to the top of its scroll container. |

## When to use

- The top of a marketing site or a small app with up to five primary links
- When the header should stay in view while content scrolls under it
- When you want one component for desktop links and the mobile menu

## When not to use

- For apps with deep navigation, use a sidebar
- For nested menus and mega menus, compose navigation-menu instead
- Inside a page section: it is page chrome, not content

## Notes for agents

- Links use next/link, so pass real hrefs; set active yourself from the pathname
- The sheet only renders when links is non-empty, so a logo plus actions header has no menu button
- It is a client component because of the sheet state; the logo and actions you pass can be server rendered
- Pass sticky={false} when rendering it inside a demo or a scroll container with its own header

Docs: https://ui.goodtabs.co/components/navbar