# Navigation Menu

A navigation bar with dropdown content (mega menu).

Group: Navigation

## Import

```tsx
import { NavigationMenu } from "@indoku/ui"
```

## Examples

### Basic usage

```tsx
function NavigationMenuDemo() {
  return (
    <NavigationMenu.Root>
      <NavigationMenu.List>
        <NavigationMenu.Item>
          <NavigationMenu.Trigger>Products</NavigationMenu.Trigger>
          <NavigationMenu.Content>
            <NavigationMenu.ContentGrid columns={2}>
              <NavigationMenu.ContentLink href="#" title="Analytics" description="Pantau metrik produk lo secara real-time." />
              <NavigationMenu.ContentLink href="#" title="Automation" description="Otomatisin workflow tanpa kode." />
              <NavigationMenu.ContentLink href="#" title="Integrations" description="Sambungin ke tools yang udah lo pake." />
              <NavigationMenu.ContentLink href="#" title="Security" description="Kontrol akses & audit log." />
            </NavigationMenu.ContentGrid>
          </NavigationMenu.Content>
        </NavigationMenu.Item>
        <NavigationMenu.Item>
          <NavigationMenu.Trigger>Resources</NavigationMenu.Trigger>
          <NavigationMenu.Content>
            <Stack gap="1" minW="48">
              <NavigationMenu.ContentLink href="#" title="Docs" />
              <NavigationMenu.ContentLink href="#" title="Blog" />
              <NavigationMenu.ContentLink href="#" title="Changelog" />
            </Stack>
          </NavigationMenu.Content>
        </NavigationMenu.Item>
        <NavigationMenu.Item>
          <NavigationMenu.Link href="#">Pricing</NavigationMenu.Link>
        </NavigationMenu.Item>
      </NavigationMenu.List>
    </NavigationMenu.Root>
  )
}
```

## Props

### Root

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `closeDelay` | `number` | `150` | Delay in ms before the menu closes after the pointer leaves the trigger/content. |

### ContentGrid

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `columns` | `number` |  |  |

### ContentLink

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` * | `ReactNode` |  |  |
| `description` | `ReactNode` |  |  |

`*` = required. Style props and HTML attributes are accepted too.