\n\u003C/template>\n\n```\n\n**Minimal Reproduction**\nRepro created using Nuxt 3 + Nuxt UI 3 starter structure.\n\npackage.json:\n```json\n{\n \"name\": \"nuxt-app\",\n \"private\": true,\n \"type\": \"module\",\n \"scripts\": {\n \"build\": \"nuxt build\",\n \"dev\": \"nuxt dev\",\n \"generate\": \"nuxt generate\",\n \"preview\": \"nuxt preview\",\n \"postinstall\": \"nuxt prepare\",\n \"lint\": \"eslint .\",\n \"lint:fix\": \"eslint --fix .\"\n },\n \"dependencies\": {\n \"@iconify-json/lucide\": \"^1.2.44\",\n \"@iconify-json/simple-icons\": \"^1.2.35\",\n \"@nuxt/ui\": \"^3.1.1\",\n \"nuxt\": \"^3.17.3\"\n },\n \"devDependencies\": {\n \"@nuxt/eslint\": \"^1.4.1\",\n \"eslint\": \"^9.27.0\",\n \"typescript\": \"^5.8.3\"\n }\n}\n```\n\nNotes\n\t•\tReproduces consistently in local dev.\n\t•\tDoes not reproduce on Codesandbox with the Nuxt UI 3 starter (possibly due to different runtime setup).\n\t•\tNo functional issues observed so far, but the warning pollutes the console.\n\t•\tThis warning has only recently started appearing in the console logs, despite no code changes to this component on our end — possibly introduced in a recent dependency update.\n",[2856,2859,2862],{"name":2857,"color":2858},"bug","d73a4a",{"name":2860,"color":2861},"v3","49DCB8",{"name":2863,"color":2864},"triage","ffffff",4257,"nuxt","ui","open","[Vue warn] toRefs() expects a reactive object but received a plain one - \u003CUNavigationMenu />","2025-05-29T23:48:43Z","https://github.com/nuxt/ui/issues/4257",0.6644458,{"description":2874,"labels":2875,"number":2878,"owner":2866,"repository":2867,"state":2879,"title":2880,"updated_at":2881,"url":2882,"score":2883},"### Environment\n\n- Operating System: Darwin\n- Node Version: v20.10.0\n- Nuxt Version: 3.15.4\n- CLI Version: 3.21.1\n- Nitro Version: 2.10.4\n- Package Manager: pnpm@9.15.0\n- Builder: -\n- User Config: compatibilityDate, future, devtools, modules, css\n- Runtime Modules: @nuxt/ui-pro@3.0.0-alpha.12, @nuxt/content@3.1.0\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.0-alpha.12\n\n### Reproduction\n\n```vue\n\u003Cscript setup>\nconst links = ref([\n {\n label: 'Components',\n to: '/components',\n active: route.path.startsWith('/components'),\n children: [\n {\n label: 'Sections',\n to: '/components/sections',\n icon: 'i-lucide-lightbulb',\n description:\n 'Sections are used to create a layout for your components.',\n active: route.path.startsWith('/components/sections')\n },\n {\n label: 'Snippets',\n to: '/components/snippets',\n icon: 'i-lucide-lightbulb',\n description:\n 'Snippets are used to create a layout for your components.',\n active: route.path.startsWith('/components/snippets')\n }\n ]\n }\n]);\n\u003C/script>\n\n\u003Ctemplate>\n \u003CUHeader>\n \u003CUNavigationMenu :items=\"links\" />\n \u003C/UHeader>\n\u003C/template>\n```\n\n### Description\n\nThe width of the menu depends on the amount of items it contains. When you have to few items, the width will be to small for the horizontal dropdown.\n\nNormally a dropdown is not related to the width of the menu, but in case of this animation I'm not sure enough to say how that could be fixed if the menu was not the relative parent.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2876,2877],{"name":2857,"color":2858},{"name":2860,"color":2861},3268,"closed","`UNavigationMenu` dropdown has wrong relative parent","2025-05-23T13:02:31Z","https://github.com/nuxt/ui/issues/3268",0.6573428,{"description":2885,"labels":2886,"number":2890,"owner":2866,"repository":2867,"state":2879,"title":2891,"updated_at":2892,"url":2893,"score":2894},"### 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```",[2887,2888,2889],{"name":2857,"color":2858},{"name":2860,"color":2861},{"name":2863,"color":2864},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.67277455,{"description":2896,"labels":2897,"number":2901,"owner":2866,"repository":2867,"state":2879,"title":2902,"updated_at":2903,"url":2904,"score":2905},"### 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```",[2898,2899,2900],{"name":2857,"color":2858},{"name":2860,"color":2861},{"name":2863,"color":2864},4073,"UNavigationMenu: Dropdown broken","2025-05-13T12:02:03Z","https://github.com/nuxt/ui/issues/4073",0.67695403,{"description":2907,"labels":2908,"number":2914,"owner":2866,"repository":2867,"state":2879,"title":2915,"updated_at":2916,"url":2917,"score":2918},"### Environment\n\n- Operating System: Darwin\n- Node Version: v22.14.0\n- Nuxt Version: 3.17.4\n- CLI Version: 3.25.1\n- Nitro Version: 2.11.12\n- Package Manager: pnpm@10.11.0\n- Builder: -\n- User Config: modules, devtools, css, ui, runtimeConfig, compatibilityDate, dayjs, eslint, image, sanity, supabase\n- Runtime Modules: @nuxt/eslint@1.4.1, @nuxt/ui@3.1.3, @nuxt/image@1.10.0, @nuxtjs/sanity@1.13.3, @nuxtjs/supabase@1.5.1, motion-v/nuxt@0.11.3, dayjs-nuxt@2.1.11, @pinia/nuxt@0.10.1\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.17.4\n\n### Reproduction\n\nHappens also in the Nuxt UI documentation: https://ui.nuxt.com/components/input-menu#items\n\n\n\n### Description\n\nI would expect that all list items appear on the first opening and not on the second one like in following video:\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2909,2910,2913],{"name":2857,"color":2858},{"name":2911,"color":2912},"duplicate","cfd3d7",{"name":2860,"color":2861},4240,"InputMenu shows only seleceted value in the list on first opening","2025-05-28T08:08:48Z","https://github.com/nuxt/ui/issues/4240",0.6838253,{"description":2920,"labels":2921,"number":2930,"owner":2866,"repository":2867,"state":2879,"title":2931,"updated_at":2932,"url":2933,"score":2934},"### Environment\n\n- Operating System: Darwin\n- Node Version: v22.14.0\n- Nuxt Version: 3.16.2\n- CLI Version: 3.25.0\n- Nitro Version: 2.11.9\n- Package Manager: npm@10.9.2\n- Builder: -\n- User Config: ssr, devtools, modules, css, app, runtimeConfig, i18n, devServer, colorMode, compatibilityDate\n- Runtime Modules: @nuxt/ui@3.0.2, @pinia/nuxt@0.5.5, @nuxt/eslint@0.5.7, @nuxtjs/i18n@9.5.3, @nuxtjs/device@3.2.4\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.0.2\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/blazing-currying-smhzvr\nnew: https://codesandbox.io/p/devbox/nuxt-ui3-n3sxks\n\n### Description\n\nI have search input inside UDropdownMenu to search items:\n1. When I focus input then hover items input loosing focus\n2. When I start typing input loosing focus and items are getting focus. You can try in reproduction url.\n3. [Offtop] Also there should be slot for menu iteself \n\n### Additional context\n\nAs I said I'm trying to type \"t\" but not working at all. This should not work this way\n\nhttps://github.com/user-attachments/assets/6c684cdb-1d5d-48c8-a5e5-eacf8507f823\n\n### Logs\n\n```shell-script\n\n```",[2922,2923,2926,2927],{"name":2857,"color":2858},{"name":2924,"color":2925},"needs reproduction","CB47CF",{"name":2860,"color":2861},{"name":2928,"color":2929},"closed-by-bot","ededed",4098,"Unable to use search input inside UDropdownMenu","2025-06-03T02:11:42Z","https://github.com/nuxt/ui/issues/4098",0.6927121,{"description":2936,"labels":2937,"number":2940,"owner":2866,"repository":2867,"state":2879,"title":2941,"updated_at":2942,"url":2943,"score":2944},"### 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```",[2938,2939],{"name":2857,"color":2858},{"name":2860,"color":2861},2766,"Badge border radius is wrong (NavigationMenu)","2024-11-26T11:23:27Z","https://github.com/nuxt/ui/issues/2766",0.69381374,{"description":2946,"labels":2947,"number":2951,"owner":2866,"repository":2867,"state":2879,"title":2952,"updated_at":2953,"url":2954,"score":2955},"### Environment\n\nstandard docs\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.1.0\n\n### Reproduction\n\nUNavigation from the docs:\n\n\n\n### Description\n\nThe width of the elements does not expend over the full width of the dropdown\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2948,2949,2950],{"name":2857,"color":2858},{"name":2860,"color":2861},{"name":2863,"color":2864},3981,"UNavigationMenu: Dropdown width broken","2025-05-02T09:38:51Z","https://github.com/nuxt/ui/issues/3981",0.6955502,{"description":2957,"labels":2958,"number":2962,"owner":2866,"repository":2867,"state":2879,"title":2963,"updated_at":2964,"url":2965,"score":2966},"### Environment\n\n```\n- Operating System: Darwin\n- Node Version: v22.14.0\n- Nuxt Version: 3.16.2\n- CLI Version: 3.24.1\n- Nitro Version: 2.11.9\n- Package Manager: bun@1.2.9\n- Builder: -\n- User Config: ssr, imports, devtools, experimental, future, compatibilityDate, alias, runtimeConfig, devServer, app, css, modules, build, hooks, dayjs, ui, typescript\n- Runtime Modules: @nuxt/eslint@1.3.0, @vueuse/nuxt@13.1.0, @nuxt/test-utils/module@3.17.2, dayjs-nuxt@2.1.11, nuxt-svgo@4.0.17, @nuxt/ui-pro@3.1.0, @pinia/nuxt@0.11.0, @pinia/colada-nuxt@0.1.1, @nuxt/image@1.10.0\n- Build Modules: -\n```\n\n\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.1.0\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/empty-fast-5xtcmy?workspaceId=ws_SD2P6X4ufyWkm2P3aqoQA6\n\n### Description\n\nbetween version 3.0.2 and 3.1.0 the content container for the menu items is no longer filling the width.\n\n### Additional context\n\n__no response__\n\n### Logs\n\n```shell-script\n\n```",[2959,2960,2961],{"name":2857,"color":2858},{"name":2860,"color":2861},{"name":2863,"color":2864},3987,"[NavigationMenu] Regression - Update","2025-05-02T09:52:45Z","https://github.com/nuxt/ui/issues/3987",0.6975742,{"description":2968,"labels":2969,"number":2971,"owner":2866,"repository":2867,"state":2879,"title":2972,"updated_at":2973,"url":2974,"score":2975},"### Environment\r\n\r\n- Operating System: Darwin\r\n- Node Version: v20.11.1\r\n- Nuxt Version: 3.11.2\r\n- CLI Version: 3.11.1\r\n- Nitro Version: 2.9.6\r\n- Package Manager: pnpm@8.14.0\r\n- Builder: -\r\n- User Config: experimental, alias, devtools, srcDir, imports, ssr, nitro, extensions, sourcemap, runtimeConfig, hooks, routeRules, css, build, modules, auth, plugins, gtag, tailwindcss, ui, colorMode, vite, vue, app\r\n- Runtime Modules: @pinia/nuxt@0.5.1, nuxt-gtag@0.5.7, @nuxt/eslint@0.3.7, @sidebase/nuxt-auth@0.7.2, @pinia-plugin-persistedstate/nuxt@1.2.0, @vueuse/nuxt@10.9.0, @nuxt/ui@2.15.1\r\n- Build Modules: -\r\n---------------------------\r\n\r\n### Version\r\n\r\nv2.15.1\r\n\r\n### Reproduction\r\n\r\nCan provide if needed\r\n\r\n### Description\r\n\r\nHi there,\r\nAbsolutely loving this library so far... this is the best UI component library I've ever used, across any framework.\r\nOne small issue though - I'm unable to use NuxtLink's `replace` in both the `HorizontalNavigation` and `VerticalNavigation`, even though the docs say I can use any property from NuxtLink. Passing `to` works perfectly, of course, but it's essential for me to `router.replace` the route and I'd rather not have to pass that as a `click` prop. The following doesn't work:\r\n\r\n```\r\n\u003Cscript setup lang='ts'>\r\nconst tabs = [\r\n ...,\r\n {\r\n replace: '/runs/bulk',\r\n label: 'Bulk Runs',\r\n icon: 'i-ph-list-bullets-bold',\r\n },\r\n]\r\n\u003C/script>\r\n\u003Ctemplate>\r\n \u003CUHorizontalNavigation\r\n :links=\"tabs\"\r\n :ui=\"{\r\n base: 'text-base font-bold',\r\n icon: { base: 'w-6 h-6' },\r\n }\"\r\n />\r\n\u003C/template>\r\n```\r\nAny help with this would be great! Thanks so much for all your hard work.\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[2970],{"name":2857,"color":2858},1690,"Cannot pass NuxtLink `replace` to Nav components","2025-05-14T14:22:12Z","https://github.com/nuxt/ui/issues/1690",0.7002523,["Reactive",2977],{},["Set"],["ShallowReactive",2980],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fULwnK2CWOOEhMpsr-p0gZtsuKzmwrpzeq8Tduy2L5Hs":-1},"/nuxt/ui/4177"]