# Navbar

Navbar is a neobrutalist React component from Cruise UI. The top bar: logo, links and actions, with a Menu drawer on phones.

Install (with the @cruiseui registry in components.json, see Installation):

```bash
npx shadcn@latest add @cruiseui/navbar
```

Import: `import { CruiseNavbar } from "@/components/cruise/navbar";`

## When to use

Every page's top navigation.

## When not to

In-page section switching (use Tabs).

## Example (React)

```tsx
import { CruiseButton } from "@/components/cruise/button";
import { CruiseNavbar } from "@/components/cruise/navbar";

export default function NavbarExample() {
  return (
    <div className="border-x-(length:--border-w) border-t-(length:--border-w) border-ink">
      <CruiseNavbar
        logo="Owo"
        links={[
          { label: "Routes", href: "#routes", active: true },
          { label: "Tickets", href: "#tickets" },
        ]}
        actions={<CruiseButton>Sign up</CruiseButton>}
      />
    </div>
  );
}
```

## HTML

Needs theme.css (https://cruiseui.dev/theme.css).

```html
<header style="border-bottom: var(--border-w) solid var(--ink); background: var(--paper)">
  <nav style="display: flex; align-items: center; gap: 24px; padding: 16px">
    <a href="/" style="font: 800 1.375rem/1 var(--font-display); color: var(--ink); text-decoration: none">Owo</a>
    <a href="/routes" aria-current="page">Routes</a>
    <a href="/tickets">Tickets</a>
    <a class="brutal btn on-primary" href="/signup" style="margin-left: auto">Sign up</a>
  </nav>
</header>
```

## Props: CruiseNavbar

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `logo` | `ReactNode` | — | — |
| `links?` | `CruiseNavLink[]` | `[]` | Inline from 768px; in the Menu drawer below that. |
| `actions?` | `ReactNode` | — | The primary CTA plus any toggles: on the right from 768px, stacked at the bottom of the Menu drawer below that. Use the "inverted" Button variant when tone is "primary", and pass `drawerActions` too. |
| `drawerActions?` | `ReactNode` | `actions` | Actions for the drawer, if they differ from `actions`. The drawer is --surface, so a yellow-navbar "inverted" CTA should become "primary". |
| `tone?` | `"primary" \| "paper"` | `"paper"` | — |
| `drawerContainer?` | `HTMLElement \| null` | — | Where the mobile drawer renders; defaults to <body>. |
| `menuBelow?` | `"lg" \| "md"` | `"md"` | Show the Menu drawer below this breakpoint (768px by default). Use "lg" (1024px) when the actions are too wide to sit inline on a tablet. |
| `className?` | `string` | — | — |

## Accessibility

- The current page link has aria-current="page".
- On phones a Menu button opens a drawer with Esc, focus trap and scroll lock.