---
url: "https://vueda.dev/v3/reference/theming/keys/NavigationMenuViewport.md"
title: "NavigationMenuViewport"
---
# NavigationMenuViewport
Source: `client/lib/theme/vueda-tailwind/navigation/index.js`
> Absolute wrapper that positions the shared viewport below the trigger row.
Vue component: [NavigationMenuViewport](/v3/reference/api/vue/NavigationMenuViewport.md)
| Slot | Default classes | Description |
| --- | --- | --- |
| [wrapper](/v3/reference/theming/keys/NavigationMenuViewport.md#theme-key-NavigationMenuViewport-wrapper) | `absolute top-full left-0 isolate z-50 flex justify-center` | Absolute wrapper that positions the shared viewport below the trigger row. |
| [root](/v3/reference/theming/keys/NavigationMenuViewport.md#theme-key-NavigationMenuViewport-root) | 4 classes | Shared animated popover surface for navigation panels. See also: [NavigationMenuContent.root](/v3/reference/theming/keys/NavigationMenuContent.md#theme-key-NavigationMenuContent-root). |
## wrapper
> Absolute wrapper that positions the shared viewport below the trigger row.
Default classes:
`absolute top-full left-0 isolate z-50 flex justify-center`
Source: `client/lib/theme/vueda-tailwind/navigation/NavigationMenuViewport.theme.js:16`
## root
> Shared animated popover surface for navigation panels. See also: [NavigationMenuContent.root](/v3/reference/theming/keys/NavigationMenuContent.md#theme-key-NavigationMenuContent-root).
Default classes:
```text
origin-top-center bg-popover text-popover-foreground
data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90
relative mt-1.5 h-[var(--reka-navigation-menu-viewport-height)] w-full overflow-hidden
rounded-vueda-control overlay-hairline md:w-[var(--reka-navigation-menu-viewport-width)] left-[var(--reka-navigation-menu-viewport-left)]
```
Source: `client/lib/theme/vueda-tailwind/navigation/NavigationMenuViewport.theme.js:20`