# Navigation Menu

> Site navigation for marketing pages: plain links and items that open a panel of links with icons and descriptions, optionally with a highlighted card.

Component · Navigation · Pro kit · [Live page](https://ui.twentyfirst.media/pro/components/NavigationMenu/)

Site navigation for marketing pages: plain links and items that open a panel of links with icons
and descriptions, optionally with a highlighted card.

- Panels open on hover and on click; Escape closes the panel and returns focus to its trigger.
- Use `TopBar` for app navigation inside the product and this for public pages.

## Example

```tsx
import { Button, NavigationMenu } from "@twentyfirstmedia/pro";

export default function Preview() {
  return (
    <div className="tf-panel" style={{ gap: 16, minHeight: 320 }}>
      <div className="tf-row" style={{ justifyContent: "space-between", gap: 16 }}>
        <NavigationMenu
          label="Site"
          items={[
            {
              label: "Product",
              feature: (
                <>
                  <b>Halo Workspace</b>
                  <span className="tf-card-desc">
                    One place for approvals, billing and the team.
                  </span>
                </>
              ),
              links: [
                { label: "Approvals", icon: "check", description: "Agents ask, people decide." },
                { label: "Billing", icon: "card", description: "Invoices, plans and payouts." },
                { label: "Analytics", icon: "chart", description: "Growth week over week." },
              ],
            },
            {
              label: "Resources",
              links: [
                { label: "Docs", icon: "book", description: "Guides and API reference." },
                { label: "Changelog", icon: "file", description: "What shipped this month." },
              ],
            },
            { label: "Pricing", href: "#" },
          ]}
        />
        <Button asChild size="sm">
          <a href="#">Get started</a>
        </Button>
      </div>
    </div>
  );
}
```

## Props

### NavigationMenu

| Prop | Type | Notes |
| --- | --- | --- |
| `items` | `NavigationMenuItem[]` | Required |
| `label?` | `string` | Accessible name of the navigation. |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |

### Button

| Prop | Type | Notes |
| --- | --- | --- |
| `variant?` | `"primary" \| "secondary" \| "soft" \| "ghost" \| "danger" \| "danger-solid"` |  |
| `size?` | `"md" \| "sm"` |  |
| `icon?` | `IconName` |  |
| `iconRight?` | `IconName` |  |
| `disabled?` | `boolean` |  |
| `type?` | `"button" \| "submit" \| "reset"` |  |
| `onClick?` | `(e: MouseEvent<HTMLButtonElement>) => void` |  |
| `children?` | `ReactNode` |  |
| `asChild?` | `boolean` | Render the single child element (a link, a router Link) with the button's look instead of a <button>. |
| `id?` | `string` |  |
| `name?` | `string` | Form field name and value, sent with the form when this button submits it. |
| `value?` | `string` |  |
| `form?` | `string` | The id of the form this button belongs to, when it sits outside it. |
| `title?` | `string` |  |
| `tabIndex?` | `number` |  |
| `autoFocus?` | `boolean` |  |
| `aria-label?` | `string` |  |
| `aria-labelledby?` | `string` |  |
| `aria-describedby?` | `string` |  |
| `aria-expanded?` | `boolean \| "true" \| "false"` | For disclosure and menu triggers: whether what the button controls is open. |
| `aria-controls?` | `string` |  |
| `aria-haspopup?` | `boolean \| "true" \| "false" \| "menu" \| "listbox" \| "tree" \| "grid" \| "dialog"` |  |
| `aria-pressed?` | `boolean \| "true" \| "false" \| "mixed"` | For toggle buttons. |
| `aria-current?` | `boolean \| "true" \| "false" \| "page" \| "step" \| "location" \| "date" \| "time"` |  |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |