# Mega menu (goodtabs UI)

A top nav with plain links and triggers that open a panel of grouped links.

## Install

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

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

## Usage

```tsx
import { MegaMenu } from "@/components/ui/mega-menu"

<MegaMenu
  items={[
    {
      label: "Product",
      groups: [
        { title: "Platform", links: [{ label: "Issues", href: "/issues", description: "Plan and track work." }] },
        { title: "Workflow", links: [{ label: "API", href: "/docs/api", description: "GraphQL with typed SDKs." }] },
      ],
    },
    { label: "Pricing", href: "/pricing" },
  ]}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| items | `({ label; href; active? } | { label; groups: { title?; links: { label; href; description? }[] }[] })[]` |  | Plain links and panel triggers, in order. Each group is one column. |
| align | `"start" | "center" | "end"` | `"start"` | Where a panel sits under its trigger from md up. |

## When to use

- A marketing header where one or two sections have many destinations
- When each destination earns a one-line description
- Next to a logo and actions in a site header from md up

## When not to use

- For three to five plain links, use the navbar
- For app navigation with deep levels, use a sidebar or nav tree
- On small screens as the only navigation: panels render in flow there, so pair it with a sheet

## Notes for agents

- Server component: items are plain data and links use next/link, so pass real hrefs and set active from the pathname
- Panels open on hover and on click, Enter or arrow down; Escape closes. There is no viewport, each panel sits under its own trigger
- Under md the panel renders in flow below the trigger instead of floating, which is fine for a sheet but not for a fixed header
- Give the parent enough room below the header: the panel is absolutely positioned and will be clipped by overflow-hidden

Docs: https://ui.goodtabs.co/components/mega-menu