---
url: "https://vueda.dev/v3/reference/theming/keys/NavigationMenuContent.md"
title: "NavigationMenuContent"
---

# NavigationMenuContent

Source: `client/lib/theme/vueda-tailwind/navigation/index.js`

> Panel content area with motion-aware slide transitions. When the viewport is disabled, this slot becomes its own popover surface.

Vue component: [NavigationMenuContent](/v3/reference/api/vue/NavigationMenuContent.md)

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/NavigationMenuContent.md#theme-key-NavigationMenuContent-root) | 8 classes | Panel content area with motion-aware slide transitions. When the viewport is disabled, this slot becomes its own popover surface. |

<a id="theme-key-NavigationMenuContent-root"></a>

## root

> Panel content area with motion-aware slide transitions. When the viewport is disabled, this slot becomes its own popover surface.

Default classes:

```text
data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out
data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52
top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto
group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground
group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95
group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0
group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden
group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border-hairline group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200
```

Source: `client/lib/theme/vueda-tailwind/navigation/NavigationMenuContent.theme.js:16`