# Top navigation

> A site header and navigation bar built from one list of links. Large screens get dropdown menus. Small screens get a drawer that keeps keyboard focus inside it.

Facade UI item `nav-top` (block, section).
Docs page: https://facadeui.dev/components/nav-top · Registry JSON: https://facadeui.dev/r/nav-top.json

## Install

```bash
npx shadcn@latest add @facade/nav-top
```

Or by URL: `npx shadcn@latest add https://facadeui.dev/r/nav-top.json`. The CLI also installs what it needs: @base-ui-components/react@1.0.0-rc.0, lucide-react@^1.47.0, @facade/button, @facade/container, @facade/types, @facade/utils.

Files: `components/sections/nav-top.tsx`

Usage example as an installable item: `npx shadcn@latest add @facade/nav-top-demo` (lands in components/examples/).

## Usage

The source of the preview on the docs page. `./content` holds sample data.

```tsx
import { NavTop } from "@/components/sections/nav-top"

import { NAV_ITEMS } from "./content"

export function Demo() {
  return (
    <div className="-m-6 sm:-m-10">
      <NavTop
        brand="Facade UI"
        homeHref="#home"
        items={NAV_ITEMS}
        currentPath="#pricing"
        actions={[
          { label: "Sign in", href: "#sign-in", variant: "ghost" },
          { label: "Start free", href: "#start" },
        ]}
        sticky={false}
      />
      <div className="text-muted-foreground p-6 text-sm sm:p-10">
        Resize the preview to 375 to see the drawer. Escape closes it and focus returns to
        the trigger.
      </div>
    </div>
  )
}
```

## Props

### NavTopProps

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `items` (required) | `NavItem[]` |  |  |
| `brand` (required) | `ReactNode` |  | Wordmark or logo. Wrapped in a link to `homeHref`. |
| `homeHref` | `string` | `"/"` |  |
| `actions` | `CtaItem[]` | `[]` | Buttons on the right. They are repeated at the bottom of the drawer. |
| `link` | `LinkComponent` |  |  |
| `currentPath` | `string` |  | Marks the matching item with `aria-current="page"`. |
| `sticky` | `boolean` | `true` | Keeps the header at the top of the viewport. |
| `menuLabel` | `string` | `"Menu"` | Label for the drawer trigger and dialog. |
| `className` | `string` |  |  |
| `id` | `string` |  |  |