navigation-menu

1<script setup lang="ts">
2import type { NavigationMenuRootEmits, NavigationMenuRootProps } from "reka-ui"
3import type { HTMLAttributes } from "vue"
4import { reactiveOmit } from "@vueuse/core"
5import {
6  NavigationMenuRoot,
7  useForwardPropsEmits,
8} from "reka-ui"
9import { cn } from "@/lib/utils"
10import NavigationMenuViewport from "./NavigationMenuViewport.vue"
11 
12const props = defineProps<NavigationMenuRootProps & { class?: HTMLAttributes["class"] }>()
13 
14const emits = defineEmits<NavigationMenuRootEmits>()
15 
16const delegatedProps = reactiveOmit(props, "class")
17 
18const forwarded = useForwardPropsEmits(delegatedProps, emits)
19</script>
20 
21<template>
22  <NavigationMenuRoot
23    v-bind="forwarded"
24    :class="cn('relative z-10 flex max-w-max flex-1 items-center justify-center', props.class)"
25  >
26    <slot />
27    <NavigationMenuViewport />
28  </NavigationMenuRoot>
29</template>