# NavigationMenu

Horizontal navigation menu with dropdown submenus

## Example

## NavigationMenu

Horizontal navigation menu with dropdown submenus

**Source:** [`packages/appkit-ui/src/react/ui/navigation-menu.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/navigation-menu.tsx)

### Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `value` | `string` |  | - | - |
| `defaultValue` | `string` |  | - | - |
| `onValueChange` | `((value: string) => void)` |  | - | - |
| `dir` | `enum` |  | - | - |
| `orientation` | `enum` |  | - | - |
| `delayDuration` | `number` |  | - | The duration from when the pointer enters the trigger until the tooltip gets opened. @defaultValue 200 |
| `skipDelayDuration` | `number` |  | - | How much time a user has to enter another trigger without incurring a delay again. @defaultValue 300 |
| `asChild` | `boolean` |  | - | - |
| `viewport` | `boolean` |  | `true` | - |

### Usage

```tsx
import { NavigationMenu } from '@databricks/appkit-ui';

```

## NavigationMenuContent

Dropdown content area for navigation submenu

**Source:** [`packages/appkit-ui/src/react/ui/navigation-menu.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/navigation-menu.tsx)

### Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `forceMount` | `true` |  | - | Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. |
| `asChild` | `boolean` |  | - | - |
| `onEscapeKeyDown` | `((event: KeyboardEvent) => void)` |  | - | Event handler called when the escape key is down. Can be prevented. |
| `onPointerDownOutside` | `((event: PointerDownOutsideEvent) => void)` |  | - | Event handler called when the a `pointerdown` event happens outside of the `DismissableLayer`. Can be prevented. |
| `onFocusOutside` | `((event: FocusOutsideEvent) => void)` |  | - | Event handler called when the focus moves outside of the `DismissableLayer`. Can be prevented. |
| `onInteractOutside` | `((event: FocusOutsideEvent \| PointerDownOutsideEvent) => void)` |  | - | Event handler called when an interaction happens outside the `DismissableLayer`. Specifically, when a `pointerdown` event happens outside or focus moves outside of it. Can be prevented. |

### Usage

```tsx
import { NavigationMenuContent } from '@databricks/appkit-ui';

```

## NavigationMenuIndicator

Visual indicator for active navigation menu item

**Source:** [`packages/appkit-ui/src/react/ui/navigation-menu.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/navigation-menu.tsx)

### Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `forceMount` | `true` |  | - | Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. |
| `asChild` | `boolean` |  | - | - |

### Usage

```tsx
import { NavigationMenuIndicator } from '@databricks/appkit-ui';

```

## NavigationMenuItem

Individual navigation menu item

**Source:** [`packages/appkit-ui/src/react/ui/navigation-menu.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/navigation-menu.tsx)

### Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `value` | `string` |  | - | - |
| `asChild` | `boolean` |  | - | - |

### Usage

```tsx
import { NavigationMenuItem } from '@databricks/appkit-ui';

```

## NavigationMenuLink

Clickable link within navigation menu

**Source:** [`packages/appkit-ui/src/react/ui/navigation-menu.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/navigation-menu.tsx)

### Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `active` | `boolean` |  | - | - |
| `onSelect` | `((event: Event) => void)` |  | - | - |
| `asChild` | `boolean` |  | - | - |

### Usage

```tsx
import { NavigationMenuLink } from '@databricks/appkit-ui';

```

## NavigationMenuList

Container list for navigation menu items

**Source:** [`packages/appkit-ui/src/react/ui/navigation-menu.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/navigation-menu.tsx)

### Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `asChild` | `boolean` |  | - | - |

### Usage

```tsx
import { NavigationMenuList } from '@databricks/appkit-ui';

```

## NavigationMenuTrigger

Button that opens a navigation submenu

**Source:** [`packages/appkit-ui/src/react/ui/navigation-menu.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/navigation-menu.tsx)

### Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `asChild` | `boolean` |  | - | - |

### Usage

```tsx
import { NavigationMenuTrigger } from '@databricks/appkit-ui';

```

## NavigationMenuViewport

Viewport container for navigation menu content

**Source:** [`packages/appkit-ui/src/react/ui/navigation-menu.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/navigation-menu.tsx)

### Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `forceMount` | `true` |  | - | Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. |
| `asChild` | `boolean` |  | - | - |

### Usage

```tsx
import { NavigationMenuViewport } from '@databricks/appkit-ui';

```