\n \u003C/UApp>\n\u003C/template>\n```\n\n### Description\n\n`NavigationMenu` is passed an item with a set `href` and `target` set to `_self`. Rendered `\u003Ca>` ignores passed `target` and sets it to `_blank`:\n\n\u003Cimg width=\"578\" height=\"320\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/e0dea426-2ed6-4dac-b1dd-f805792348af\" />\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3171,3174,3177],{"name":3172,"color":3173},"bug","d73a4a",{"name":3175,"color":3176},"v3","49DCB8",{"name":3178,"color":3179},"triage","ffffff",5012,"nuxt","ui","open","`NavigationMenu`: `NavigationMenuItem.target` seems to be ignored","2025-09-19T04:45:20Z","https://github.com/nuxt/ui/issues/5012",0.6765239,{"description":3189,"labels":3190,"number":3194,"owner":3181,"repository":3182,"state":3183,"title":3195,"updated_at":3196,"url":3197,"score":3198},"### Environment\n\n- Operating System: `Darwin`\n- Node Version: `v22.17.0`\n- Nuxt Version: `4.0.3`\n- CLI Version: `3.27.0`\n- Nitro Version: `2.12.4`\n- Package Manager: `pnpm@9.15.3`\n- Builder: `-`\n- User Config: `devtools`, `ssr`, `modules`, `css`, `runtimeConfig`, `icon`, `fonts`, `future`, `compatibilityDate`\n- Runtime Modules: `@nuxt/ui-pro@3.3.2`, `@vueuse/nuxt@13.6.0`, `@formkit/auto-animate/nuxt@0.8.2`, `nuxt-charts@0.2.3`\n- Build Modules: `-`\n\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nNuxt UI Pro 3.3.2\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-zbenj5fx?file=app%2Fpages%2Findex.vue\n\n\n### Description\n\nI have a ContextMenu wrapped on a NuxtLink and when I click outside, it should close the menu, instead it opens the link.\n\n\n### Additional context\n\n### Demo of the bug\n\nhttps://github.com/user-attachments/assets/bdbe4169-e6b5-4452-8b8a-5a580238db17\n\n@benjamincanac @HugoRCD any way to stop the link propogation?\n\n### Logs\n\n```shell-script\n\n```",[3191,3192,3193],{"name":3172,"color":3173},{"name":3175,"color":3176},{"name":3178,"color":3179},4811,"ContextMenu outside click on NuxtLink opens the link instead of closing the menu","2025-08-24T06:39:11Z","https://github.com/nuxt/ui/issues/4811",0.6933751,{"description":3200,"labels":3201,"number":3206,"owner":3181,"repository":3182,"state":3183,"title":3207,"updated_at":3208,"url":3209,"score":3210},"### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Package\n\nv4.x\n\n### Version\n\nv4.0.1\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/quizzical-dust-9h7kfm?file=%2Fapp%2Fapp.vue%3A7%2C8-7%2C25\n\n### Description\n\nUsing `:menu=\"{ ui: { ... } }` to theme slideover has no effect.\n\nIn the sandbox it should be red:\n```\n\u003CUDashboardSidebar :menu=\"{ side: 'right', ui: { overlay: 'bg-black/50', content: 'bg-red-400' } }\">\n```",[3202,3203,3204],{"name":3172,"color":3173},{"name":3178,"color":3179},{"name":3205,"color":3176},"v4",5179,"UDashboardSidebar menu ui prop has no effect","2025-10-07T17:08:03Z","https://github.com/nuxt/ui/issues/5179",0.69376093,{"description":3212,"labels":3213,"number":3217,"owner":3181,"repository":3182,"state":3183,"title":3218,"updated_at":3219,"url":3220,"score":3221},"### Environment\n\n\"nuxt\": \"^3.17.5\",\n\"@nuxt/ui\": \"^3.1.3\",\n\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.1.3\n\n### Reproduction\n\nFollowing is my `components/AppHeader.vue`:\n\n```\n\u003Ctemplate>\n \u003Cheader class=\"bg-white sticky top-0 z-50\">\n \u003Cnav class=\"hidden lg:flex flex-1 justify-center\">\n \u003CUNavigationMenu\n v-model=\"activeSection\"\n :items=\"navItems\"\n class=\"space-x-2\"\n highlight\n highlight-color=\"primary\"\n >\n \u003Ctemplate #item=\"{ item, active }\">\n \u003CULink\n as-child\n :to=\"{ path: '', hash: `#${item.to}` }\"\n exact-hash\n class=\"px-4 py-2 rounded-md transition\"\n aria-label=\"Go to {{ item.label }}\"\n >\n \u003Cspan class=\"inline-flex items-center\">\n \u003CUIcon v-if=\"item.icon\" :name=\"item.icon\" class=\"size-5 mr-2\" />\n \u003Cspan>{{ item.label }}\u003C/span>\n \u003C/span>\n \u003C/ULink>\n \u003C/template>\n \u003C/UNavigationMenu>\n \u003C/nav>\n \u003C/header>\n\u003C/template>\n\n\u003Cscript setup lang=\"ts\">\nimport { ref, watch, onMounted } from \"vue\";\nimport { useRoute } from \"vue-router\";\nimport type { NavigationMenuItem } from \"@nuxt/ui\";\n\nconst route = useRoute();\nconst activeSection = ref(\"\");\n\n// Define your nav data (to = hash without leading '#')\nconst navItems = ref\u003CNavigationMenuItem[]>([\n { label: \"Home\", icon: \"i-lucide-home\", value: \"\", to: \"\" },\n {\n label: \"About Us\",\n icon: \"i-lucide-user-circle\",\n value: \"about\",\n to: \"about\",\n },\n {\n label: \"Products\",\n icon: \"i-lucide-package\",\n value: \"products\",\n to: \"products\",\n },\n {\n label: \"Technologies\",\n icon: \"i-lucide-cpu\",\n value: \"technologies\",\n to: \"technologies\",\n },\n {\n label: \"News\",\n icon: \"i-lucide-newspaper\",\n value: \"news\",\n to: \"news\",\n },\n]);\n\n// On load, seed activeSection from the current hash\nonMounted(() => {\n activeSection.value = route.hash.replace(/^#/, \"\");\n});\n\n// Update when the hash changes\nwatch(\n () => route.hash,\n (h) => {\n activeSection.value = h.replace(/^#/, \"\");\n }\n);\n\u003C/script>\n```\n\n### Description\n\n\nI’m using the Nuxt UI `\u003CUNavigationMenu>` component in my Nuxt 3 app to render a header nav that scrolls to sections via hash links within my `pages/index.vue` (`#about`, `#products`, `#news`, etc.). Clicking works fine, and the correct menu item highlights and scrolls to that section.\n\nHowever, if I reload the page while viewing, for example,`/#products` or any other section like `#news, #about`, etc., the page scrolls to the respective `products/news/about` section, but the navigation menu always highlights `“Home”` (the first item) instead of `Products/News/About`.\n\nHow can I get `\u003CUNavigationMenu>` to pick up the current `route.hash` on load so that the correct item is active?\n\n\n\nFollowing is the documentation I am refeering to:\n\u003CUNavigationMenu> API: [https://ui.nuxt.com/components/navigation-menu][1]\n\n\n [1]: https://ui.nuxt.com/components/navigation-menu\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3214,3215,3216],{"name":3172,"color":3173},{"name":3175,"color":3176},{"name":3178,"color":3179},4416,"Nuxt 3/Nuxt UI UNavigationMenu won’t highlight hash‐based section on page reload","2025-06-28T10:47:43Z","https://github.com/nuxt/ui/issues/4416",0.7123367,{"description":3223,"labels":3224,"number":3228,"owner":3181,"repository":3182,"state":3229,"title":3230,"updated_at":3231,"url":3232,"score":3233},"### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.3.0\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/winter-bush-zyn48t?file=%2Fapp%2Fapp.vue%3A4%2C33\n\n### Description\n\nFor some reason the badge is not diplayed when it is a number `0` even tho it has been recently set to be not displayed only when undefined in #b22891a https://github.com/nuxt/ui/commit/b22891abe68c40d4a33fbbcedac93e3a6be9951f\n",[3225,3226,3227],{"name":3172,"color":3173},{"name":3175,"color":3176},{"name":3178,"color":3179},4670,"closed","`NavigationMenuItem` badge is not displayed when `0`","2025-10-06T10:40:25Z","https://github.com/nuxt/ui/issues/4670",0.63520074,{"description":3235,"labels":3236,"number":3239,"owner":3181,"repository":3182,"state":3229,"title":3240,"updated_at":3241,"url":3242,"score":3243},"### Environment\n\n- Operating System: Darwin\n- Node Version: v20.10.0\n- Nuxt Version: 3.14.159\n- CLI Version: 3.15.0\n- Nitro Version: 2.10.4\n- Package Manager: npm@10.9.0\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/ui@3.0.0-alpha.9, nuxt-svgo@4.0.9\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.0-alpha.9\n\n### Reproduction\n\n```vue\n\u003Cscript setup lang=\"ts\">\n/* Types */\nimport type { NavigationMenuItem } from \"#ui/types\";\n\nconst items = ref\u003CNavigationMenuItem[][]>([\n [\n {\n label: \"Menu\",\n defaultOpen: true,\n children: [\n {\n label: \"Submenu\",\n badge: {\n label: \"latest\",\n color: \"secondary\",\n },\n to: \"https://www.example.com\",\n target: \"_blank\",\n },\n ],\n },\n ],\n]);\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv class=\"h-full\">\n \u003CUNavigationMenu orientation=\"vertical\" :items=\"items\" />\n \u003C/div>\n\u003C/template>\n```\n\n### Description\n\nAfter upgrading from `alpha.8` to `alpha.9`, the border radius is wrong (different from the rest of the application) when using badge in the [NavigationMenu](https://ui3.nuxt.dev/components/navigation-menu). When inspecting HTML, this is the class (related to border radius) applied to the badge: `rounded-[calc(var(--ui-radius)]`.\n\nI also tried passing the [class](https://ui3.nuxt.dev/components/badge#class-prop) to `BadgeProps` but it doesn't work:\n```vue\n```vue\n\u003Cscript setup lang=\"ts\">\n/* Types */\nimport type { NavigationMenuItem } from \"#ui/types\";\n\nconst items = ref\u003CNavigationMenuItem[][]>([\n [\n {\n label: \"Menu\",\n defaultOpen: true,\n children: [\n {\n label: \"Submenu\",\n badge: {\n label: \"latest\",\n color: \"secondary\",\n class: \"rounded-full\", // ! NOT WORKING\n },\n to: \"https://www.example.com\",\n target: \"_blank\",\n },\n ],\n },\n ],\n]);\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv class=\"h-full\">\n \u003CUNavigationMenu orientation=\"vertical\" :items=\"items\" />\n \u003C/div>\n\u003C/template>\n```\nHowever, IMO the border radius should be inherited (no need to pass `class`).\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3237,3238],{"name":3172,"color":3173},{"name":3175,"color":3176},2766,"Badge border radius is wrong (NavigationMenu)","2024-11-26T11:23:27Z","https://github.com/nuxt/ui/issues/2766",0.66825396,{"description":3245,"labels":3246,"number":3250,"owner":3181,"repository":3182,"state":3229,"title":3251,"updated_at":3252,"url":3253,"score":3254},"### Environment\n\n\n\n- Operating System: Darwin\n- Node Version: v23.9.0\n- Nuxt Version: 3.16.2\n- CLI Version: 3.24.1\n- Nitro Version: 2.11.8\n- Package Manager: npm@10.9.2\n- Builder: -\n- User Config: compatibilityDate, devtools, modules, components, css, devServer, ssr, vuefire, runtimeConfig\n- Runtime Modules: @nuxt/image@1.10.0, @nuxt/ui-pro@3.0.2, nuxt-vuefire@1.0.5\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.2\n\n### Reproduction\n\nThis is noticeable on the documentation [page](https://ui.nuxt.com/components/navigation-menu#orientation) for any vertical navigation menu with children navigation items. \n\n### Description\n\nThe parent item renders as a `\u003Cbutton>` tag instead of the `\u003Ca>` tags of other navigation menu items. This means the `to:` attribute is ignored (and target) and can't be clicked on. This is likely due to the parent and children being converted to a Collapsible component under the hood. \n\nWhen the orientation is horizontal, however, you can have both the parent and children be links - where they render `\u003Ca>` tags. Hovering over the horizontal parent shows the children, but the parent can still be a link.\n\nIdeally, we could set a boolean to control whether the children are converted to a Collapsible or not. Or wrap the Collapsible parent around a link. Understandably, the click then couldn't trigger opening/closing the collapsible (maybe the icon triggers opening/closing, while the label can still have the Link attributes available).\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3247,3248,3249],{"name":3172,"color":3173},{"name":3175,"color":3176},{"name":3178,"color":3179},3911,"[NavigationMenu] Vertical menu with children doesn't respect parent Link attributes.","2025-05-10T15:51:54Z","https://github.com/nuxt/ui/issues/3911",0.6825743,{"description":3256,"labels":3257,"number":3261,"owner":3181,"repository":3182,"state":3229,"title":3262,"updated_at":3263,"url":3264,"score":3265},"### Environment\n\nnot needed\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.1\n\n### Reproduction\n\ncheck current docs: https://ui.nuxt.com/components/navigation-menu#content-orientation\n\n### Description\n\n\n\nThe dropdown is at wrong position... also the \"arrow\" prop doesnt work\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3258,3259,3260],{"name":3172,"color":3173},{"name":3175,"color":3176},{"name":3178,"color":3179},4073,"UNavigationMenu: Dropdown broken","2025-05-13T12:02:03Z","https://github.com/nuxt/ui/issues/4073",0.6864592,{"description":3267,"labels":3268,"number":3274,"owner":3181,"repository":3182,"state":3229,"title":3275,"updated_at":3276,"url":3277,"score":3278},"### Environment\n\n- Operating System: Darwin\n- Node Version: v20.11.1\n- Nuxt Version: 3.16.2\n- CLI Version: 3.25.1\n- Nitro Version: 2.11.12\n- Package Manager: npm@10.2.4\n- Builder: -\n- User Config: css, compatibilityDate, devtools, future, modules, runtimeConfig, ssr, typescript\n- Runtime Modules: @nuxt/eslint@1.4.0, @nuxt/fonts@0.11.4, @nuxt/ui-pro@3.1.2, @pinia/nuxt@0.5.5, @vueuse/nuxt@10.11.1, nuxt-auth-utils@0.5.20, nuxt-authorization@0.3.4\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.2\n\n### Reproduction\n\nJust use the code of https://github.com/nuxt-ui-pro/dashboard/blob/main/app/pages/settings.vue and add a child to one of the links used for the UNavigationMenu. Like :\n````\n{\n label: \"General\",\n icon: \"i-lucide-user\",\n to: \"/settings\",\n children: [\n {\n label: \"Hello\",\n icon: \"i-lucide-book-open\",\n },\n ],\n exact: true,\n },\n````\n\n### Description\n\nIt seems wrapping the UNavigationMenu component in UDashboardToolbar will cause the UNavigationMenu's links children dropdown to not appear or be hidden.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3269,3270,3271],{"name":3172,"color":3173},{"name":3175,"color":3176},{"name":3272,"color":3273},"nuxt/ui-pro","00dc82",4177,"UNavigationMenu item children not visible when wrapped in UDashboardToolbar","2025-05-23T12:23:17Z","https://github.com/nuxt/ui/issues/4177",0.6984376,{"description":3280,"labels":3281,"number":3287,"owner":3181,"repository":3182,"state":3229,"title":3288,"updated_at":3289,"url":3290,"score":3291},"### Environment\n\n- Operating System: Linux\n- Node Version: v20.18.2\n- Nuxt Version: 3.16.2\n- CLI Version: 3.24.1\n- Nitro Version: 2.11.9\n- Package Manager: pnpm@10.8.0\n- Builder: -\n- User Config: extends, modules, ssr, site, runtimeConfig, alias, sourcemap, future, features, nitro, hub, eslint, i18n, sentry\n- Runtime Modules: @sentry/nuxt/module@9.12.0 @compodium/nuxt@0.1.0-beta.8, @nuxt/test-utils/module@3.17.2, @vueuse/nuxt@13.1.0, @pinia/nuxt@0.11.0, pinia-plugin-persistedstate/nuxt@4.2.0, @nuxt/ui@3.0.2, reka-ui/nuxt@2.2.0, @nuxt/image@1.10.0, @formkit/auto-animate/nuxt@0.8.2, motion-v/nuxt@1.0.0-beta.2, nuxt-svgo@4.0.17, @nuxt/eslint@1.3.0, nuxt-llms@0.1.2, nuxt-security@2.2.0, @nuxtjs/seo@3.0.2, @nuxtjs/i18n@9.5.3, nuxt-auth-utils@0.5.19, @nuxt/scripts@0.11.5, nuxt-delay-hydration@1.3.8\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.16.2\n\n### Reproduction\n\nhttps://ui.nuxt.com/components/navigation-menu#arrow\n\n### Description\n\nYou can even reproduce this in the current demo page, the arrow is not moving, or for some reason it glitches, this doesn't happen with the Reka components\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3282,3283,3284],{"name":3172,"color":3173},{"name":3175,"color":3176},{"name":3285,"color":3286},"reka-ui","56d799",3907,"NavigationMenu arrow not moving","2025-05-15T14:41:00Z","https://github.com/nuxt/ui/issues/3907",0.70280075,["Reactive",3293],{},["Set"],["ShallowReactive",3296],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fd-Ap1pxmDDPvNsE_kPYUpcL-Wrr0lBi_bx3tjGbdr4Q":-1},"/nuxt/ui/5192"]