\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.72243965,{"description":2874,"labels":2875,"number":2880,"owner":2866,"repository":2867,"state":2868,"title":2881,"updated_at":2882,"url":2883,"score":2884},"### Description\n\nHey! Thanks for trying to make nuxt/ui even more awesome.\n\nI've been struggled with adding NavigationMenu items animation on toggling collapsed of/off states. \nI'd like to make it work smoothly and keep only icons with popovers in collapsed state and show the rest only when collapsed is off. out of the box its only toggled on/off without transitions.\nI see no option to pass slot to wrap labels with vue Transition component or use Motion-vue and either css animations like data-[collaped=true]:animate.... not working well because whole inner content of nav is wrapped with \"v-if\" and switched on collapsed. \n\nIn some components data-[state] animations works well, but not in collapsed NavigationMenu. Or am I doing something wrong?\nOnly a way I see is to override whole item slot. But for now I've just get rid of NavigationMenu and made my own custom component with fancy transitions.\nPlease point me to right direction and suggest best practices, cuz I'd like to use most of components and make it work with smooth transitions/animations, but sometimes got stucked with limitations/lack of knowledge. \n\nofftop: For example, wasted many hours trying to achieve smooth slide-down transition for table expanded rows. Ended up with expanded slot with UCollapsible plus exclusive inner state for it, changed with setTimeout(() => { ... }, 300), Ugly, hucky, but it works.",[2876,2879],{"name":2877,"color":2878},"question","d876e3",{"name":2860,"color":2861},4254,"NavigationMenu transitions/animations on toggle collapsed state","2025-05-29T21:37:50Z","https://github.com/nuxt/ui/issues/4254",0.72513926,{"description":2886,"labels":2887,"number":2890,"owner":2866,"repository":2867,"state":2891,"title":2892,"updated_at":2893,"url":2894,"score":2895},"### Description\n\nIn the vertical pill variant I want the background of the active item to be white. It's not clear how to achieve this through the `ui` prop\n\n\n\n```\n\u003CUNavigationMenu\n orientation=\"vertical\"\n variant=\"pill\"\n :items=\"items\"\n\n :ui=\"{\n variants: {\n compoundVariants: [\n {\n variant: 'pill',\n active: true,\n highlight: false,\n class: {\n link: 'before:bg-white' // tried this but it's not working\n }\n }\n ]\n }\n }\"\n/>\n```",[2888,2889],{"name":2877,"color":2878},{"name":2860,"color":2861},3517,"closed","How To Style NavigationMenu items","2025-05-10T11:36:22Z","https://github.com/nuxt/ui/issues/3517",0.70182097,{"description":2897,"labels":2898,"number":2901,"owner":2866,"repository":2867,"state":2891,"title":2902,"updated_at":2903,"url":2904,"score":2905},"### Environment\n\n- Operating System: Windows_NT\n- Node Version: v22.11.0\n- Nuxt Version: 3.14.0\n- CLI Version: 3.17.2\n- Nitro Version: 2.10.4\n- Package Manager: npm@10.9.0\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/icon@1.10.3, @nuxt/content@2.13.4, @nuxt/ui@2.20.0, @dargmuesli/nuxt-cookie-control@8.4.20, @pinia/nuxt@0.9.0\n- Build Modules: -\n\n### Version\n\nv2.20.0\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-ui-dbszxsce?file=app.vue\n\n### Description\n\nWhen I ran chrome lighthouse, the results showed that the breadcrumb section was detected as not complying with the recommendation.\n\nI'm using `icon` only without label with defined `to` at first of Links array, to make it more descriptive as lighthouse said, i pass `'aria-label'` property and its value to object of `Links`, at first i thought it would work because as the documentation said about Breadcrumb:\n\n> You can also pass any property from the [NuxtLink](https://nuxt.com/docs/api/components/nuxt-link#props) component such as to, exact, etc. \n> Reference: https://ui.nuxt.com/components/breadcrumb#usage\n\nwell the attrbute is not rendered, but if i pass `ariaLabel` property, the attribute is rendered correctly (with `-` symbol) **Without reloading or HMR triggered,** , and if the page refreshed, it's broken (`-` symbol missing) \n\nNote: i always apply it to every NuxtLink though, aria-label is working as expected\n\nIs there any such way to apply aria-label without `'label'` on object of the links?\n\n### Additional context\n\nattribute rendered as expected (HMR trigger)\n\n\ndash symbol is missing after page reload\n",[2899,2900],{"name":2857,"color":2858},{"name":2863,"color":2864},3007,"UBreadcrumb wont render aria attribute","2025-03-24T17:55:54Z","https://github.com/nuxt/ui/issues/3007",0.73081875,{"description":2907,"labels":2908,"number":2914,"owner":2866,"repository":2867,"state":2891,"title":2915,"updated_at":2916,"url":2917,"score":2918},"### 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```",[2909,2910,2911],{"name":2857,"color":2858},{"name":2860,"color":2861},{"name":2912,"color":2913},"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.73151094,{"description":2920,"labels":2921,"number":2924,"owner":2866,"repository":2867,"state":2891,"title":2925,"updated_at":2926,"url":2927,"score":2928},"### 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```",[2922,2923],{"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.737056,{"labels":2930,"number":2934,"owner":2866,"repository":2866,"state":2891,"title":2935,"updated_at":2936,"url":2937,"score":2938},[2931],{"name":2932,"color":2933},"3.x","29bc7f",11875,"TailwindCSS only works on client-side","2023-01-19T15:48:25Z","https://github.com/nuxt/nuxt/issues/11875",0.73770267,{"description":2940,"labels":2941,"number":2945,"owner":2866,"repository":2867,"state":2891,"title":2946,"updated_at":2947,"url":2948,"score":2949},"### 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```",[2942,2943,2944],{"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.7387204,{"description":2951,"labels":2952,"number":2954,"owner":2866,"repository":2867,"state":2891,"title":2955,"updated_at":2956,"url":2957,"score":2958},"### 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_",[2953],{"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.7391508,{"description":2960,"labels":2961,"number":2964,"owner":2866,"repository":2867,"state":2891,"title":2965,"updated_at":2966,"url":2967,"score":2968},"### Environment\n\n- Operating System: `Darwin`\n- Node Version: `v22.12.0`\n- Nuxt Vesion: `3.17.1`\n- Nitro version: `2.11.11`\n- Package Manager: `pnpm@10.8.0`\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://github.com/rudrokhanpro/nuxt-ui-tailwind-in-layers-bug\n\n### Description\n\nHello!\nI have encountered a bug affecting TailwindCSS colors in Nuxt Layers.\nI have attached a repo that mimics a project I'm working on.\n\nThere is a first root Nuxt app with NuxtUI called `zero`.\nThere is also a second Nuxt app that `extends: [\"../zero\"]`.\nFinally, there is a third and last Nuxt app that `extends: [\"../one\"]`.\n\nIf we run the `one` project, we can access [`/one`](http://localhost:3000/one), a page that displays components both from the `zero` and `one` projects. \nIf we run the `two` project, we can access [`/two`](http://localhost:3000/two), a page that displays components both from the `zero`, `one` and `two` projects.\n\nYou will notice that the page seems \"empty\" but in reality there are button whose styles are not being set correctly. It seems that it only affects colors because if we inspect the elements we can see that the padding and some hover styles are being applied correctly.\n\n\n\nTo fix this issue, I had to safelist all colors in the root project:\n\n```css\n/* assets/css/main.css */\n@source inline(\"{hover:,disabled:,focus:,}bg-{red,orange,amber,yellow,lime,green,emerald,teal,cyan,sky,blue,indigo,violet,purple,fuchsia,pink,rose,slate,gray,zinc,neutral,stone}-{50,{100..900..100},950}\");\n```\n\nAnd we get the following result:\n\n\n\n### Additional context\n\nI have been migrating and updating my project to Nuxt UI v3 since it was in alpha and it has been a great experience thanks to the contributors of this repository. \n\nThis bug was introduced with Tailwind v4.0.8. I checked every single release and it seems related to the TailwindCSS import and `@theme static {}`\n\n### Logs\n\n```shell-script\n\n```",[2962,2963],{"name":2857,"color":2858},{"name":2860,"color":2861},4049,"Tailwind colors not working in Nuxt Layers","2025-05-19T10:29:55Z","https://github.com/nuxt/ui/issues/4049",0.7395765,["Reactive",2970],{},["Set"],["ShallowReactive",2973],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fN43deAm0F8ZZj-aLECYdhpXRASf8GJgZNWrUoIvFlnk":-1},"/nuxt/ui/3683"]