\n\n**Steps to reproduce:**\n\n- Set up a Nuxt 4 project with Nuxt UI (version 4+).\n- Implement a UNavigationMenu component with nested children items.\n- In the ui prop of UNavigationMenu, define both link and childLink with conflicting horizontal padding classes (e.g., link: 'px-6 ...' and childLink: 'px-10 ...').\n- Inspect the rendered HTML of the nested links in the browser developer tools.\n- Observe that the px-10 from childLink is not applied, and px-6 (or similar padding from link) remains.\n\n**Example Code**\n\n```\n\u003Ctemplate>\n \u003CUNavigationMenu :ui=\"{\n link: 'px-6 py-3 before:bg-transparent before:inset-0 before:rounded-none text-md text-white space-x-2',\n item: 'border-b border-default',\n childList: 'border-none ml-0',\n childItem: 'p-0',\n childLink: 'px-10 bg-red-500', // These styles are not fully applied\n root: 'border-t border-default'\n }\" :collapsed=\"collapsed\" :items=\"primaryItems\" orientation=\"vertical\" color=\"neutral\" />\n\u003C/template>\n\n\u003Cscript setup lang=\"ts\">\nimport type { NavigationMenuItem } from '@nuxt/ui'\n\ninterface Props {\n collapsed?: boolean\n}\n\ndefineProps\u003CProps>()\n\n\nconst primaryItems = computed\u003CNavigationMenuItem[][]>(() => [[\n {\n label: 'Portfolios',\n icon: 'i-lucide-briefcase',\n to: '/portfolio',\n children: [ // These children's links are affected\n {\n label: 'Portfolio 1',\n description: 'Description 1',\n to: `/portfolio/1`,\n active: false\n },\n {\n label: 'Portfolio 2',\n description: 'Description 2',\n to: `/portfolio/2`,\n active: false\n }\n ]\n }\n]])\n\u003C/script>\n```\n\n### Description\n\nThe ui.childLink slot within the UNavigationMenu component is not applying any custom Tailwind CSS classes to the links of nested list items (children of items). This issue persists even when ui.link styles are not defined or do not conflict, indicating a broader problem with the childLink slot's functionality. This affects all classes defined in childLink, not just padding.\n\n**Expected Behavior:**\n\nStyles defined in ui.childLink (e.g., px-10, bg-red-500, etc.) should be exclusively and consistently applied to the \u003Ca> tags of nested list items.\n\n**Current Behavior:**\n\nDespite defining ui.childLink with various Tailwind CSS classes (e.g., 'px-10 bg-red-500') for UNavigationMenu, none of these styles are applied to the rendered HTML for nested links (children of items) in the DOM. The links retain their default styling or styling inherited from other sources, completely ignoring the childLink definition. This happens even when the ui.link slot is empty or configured not to conflict.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3180,3183,3186],{"name":3181,"color":3182},"bug","d73a4a",{"name":3184,"color":3185},"triage","ffffff",{"name":3187,"color":3188},"v4","49DCB8",5223,"nuxt","ui","open","[NavigationMenu]: childLink styles not applying to nested list item links","2025-10-13T20:15:29Z","https://github.com/nuxt/ui/issues/5223",0.6617694,{"description":3198,"labels":3199,"number":3203,"owner":3190,"repository":3191,"state":3192,"title":3204,"updated_at":3205,"url":3206,"score":3207},"### 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://dashboard-template.nuxt.dev/\n\n### Description\n\nIf one clicks on the badge in a `UNavigationMenu` nothing happens. This shouldnt be the case, the menu item should be clickable on the badge as well.",[3200,3201,3202],{"name":3181,"color":3182},{"name":3184,"color":3185},{"name":3187,"color":3188},5192,"NavigationMenu badge is not clickable","2025-10-09T11:17:52Z","https://github.com/nuxt/ui/issues/5192",0.6871661,{"description":3209,"labels":3210,"number":3215,"owner":3190,"repository":3191,"state":3192,"title":3216,"updated_at":3217,"url":3218,"score":3219},"### Environment\n\n- Operating System: Darwin\n- Node Version: v22.15.0\n- Nuxt Version: 3.17.7\n- CLI Version: 3.25.1\n- Nitro Version: 2.11.13\n- Package Manager: pnpm@10.10.0\n- Builder: -\n- User Config: compatibilityDate, devtools, modules, fonts, icon, components, css, ui\n- Runtime Modules: @nuxt/fonts@0.11.4, @nuxt/eslint@1.5.2, @nuxt/icon@1.15.0, @nuxt/image@1.10.0, @nuxt/ui@3.2.0\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.2.0\n\n### Reproduction\n\nTheming with either of this method such as:\n\n### Theming in `app.config.ts`\nSame issue for both UInputTags and UInputMenu (multiple)\n```typescript\ninputTags: {\n ...\n compoundVariants: [\n {\n variant: 'outline',\n class : {\n root: 'root-test',\n base: 'base-test',\n },\n },\n ],\n},\ninputMenu: {\n ...\n compoundVariants: [\n // Works properly\n {\n variant: 'outline',\n class : {\n root: 'root-test',\n base: 'base-test',\n },\n },\n // Wrong behaviour\n {\n variant: 'outline',\n multiple: true,\n class : {\n root: 'root-test',\n base: 'base-test',\n },\n },\n ],\n},\n\n```\n### Theming directly using `ui`\n```tsx\n\u003CUInputTags\n ...\n :ui=\"{\n root: 'root-test',\n base: 'base-test',\n }\"\n/>\n```\n\n### Will results something like this\n```html\n\u003Cdiv class=\"... root-test base-test\">\n ...\n \u003Cinput class=\"...\" />\n\u003C/div>\n```\n\n### Description\n\nWhen applying themes in `app.config.ts`, both **UInputTags** and **UInputMenu (multiple)** share the same weird behaviour compared with other components, where the class applied to `base` part of the component are applied to `root` part of the component.\n\n### Expected Behaviour\nThe applied class on `base` should be applied to the `\u003Cinput />`, not the `root` part of the component which is the outer `\u003Cdiv />` just like other input components such as **UInput**, **UInputNumber**, or **UTextarea**.\n\nCorrect me if I'm wrong if this are intended, thank you!\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3211,3212,3214],{"name":3181,"color":3182},{"name":3213,"color":3188},"v3",{"name":3184,"color":3185},4530,"[UInputTags, UInputMenu] Theming behaviour issues","2025-07-15T17:50:02Z","https://github.com/nuxt/ui/issues/4530",0.7043706,{"description":3221,"labels":3222,"number":3226,"owner":3190,"repository":3191,"state":3192,"title":3227,"updated_at":3228,"url":3229,"score":3230},"### Environment\n\n- Operating System: Linux\n- Node Version: v20.19.1\n- Nuxt Version: -\n- CLI Version: 3.28.0\n- Nitro Version: -\n- Package Manager: pnpm@8.15.6\n- Builder: -\n- User Config: -\n- Runtime Modules: -\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nVue\n\n### Package\n\nv3.x\n\n### Version\n\nv3.3.4\n\n### Reproduction\n\nhttps://stackblitz.com/edit/vitejs-vite-9khbefry?file=src/App.vue (please open in blink-based browsers, something in the reproduction webcontainer really does not want to run in firefox)\n```vue\n\u003Ctemplate>\n \u003CUApp>\n \u003CUNavigationMenu\n :items=\"[\n {\n label: 'Nuxt UI',\n href: 'https://ui.nuxt.com',\n target: '_self',\n },\n ]\"\n />\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```",[3223,3224,3225],{"name":3181,"color":3182},{"name":3213,"color":3188},{"name":3184,"color":3185},5012,"`NavigationMenu`: `NavigationMenuItem.target` seems to be ignored","2025-09-19T04:45:20Z","https://github.com/nuxt/ui/issues/5012",0.7145769,{"description":3232,"labels":3233,"number":3236,"owner":3190,"repository":3191,"state":3237,"title":3238,"updated_at":3239,"url":3240,"score":3241},"### Environment\n\n- Operating System: Linux\n- Node Version: v22.4.0\n- Nuxt Version: 3.14.1592\n- CLI Version: 3.15.0\n- Nitro Version: 2.10.4\n- Package Manager: pnpm@9.14.2\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/ui@3.0.0-alpha.9, nuxt-auth-sanctum@0.5.2, @vueuse/nuxt@11.3.0\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.14.1592\n\n### Reproduction\n\n```vue\n\u003Cscript setup lang=\"ts\"\nconst placeItems = ref([{ id: 1, name: 'Place 1' }, { id: 2, name: 'Place 2' }])\n\u003C/script>\n\n\u003Ctemplate>\n\u003CUInputMenu :items=\"placeItems\"\n value-key=\"id\"\n label-key=\"name\"\n class=\"w-full mb-4\"\n multiple />\n\n\u003CUInputMenu :items=\"placeItems\"\n value-key=\"id\"\n label-key=\"name\"\n class=\"w-full\"/>\n\u003C/template>\n```\n\n### Description\nIn my opinion, the border, when focusing, should have the same color as when the parameter is absent `multiple`.\nWith white border looks bad :D\nhttps://skr.sh/vSqjqLYGgHO",[3234,3235],{"name":3181,"color":3182},{"name":3213,"color":3188},2742,"closed","UInputMenu has wrong border when focused in multiple mode","2024-12-05T13:48:56Z","https://github.com/nuxt/ui/issues/2742",0.66797525,{"description":3243,"labels":3244,"number":3248,"owner":3190,"repository":3191,"state":3237,"title":3249,"updated_at":3250,"url":3251,"score":3252},"### Environment\n\n------------------------------\n- Operating System: Darwin\n- Node Version: v22.13.1\n- Nuxt Version: 3.17.3\n- CLI Version: 3.25.1\n- Nitro Version: 2.11.12\n- Package Manager: npm@10.9.2\n- Builder: -\n- User Config: hooks, app, runtimeConfig, supabase, routeRules, sitemap, site, compatibilityDate, devtools, modules, css, ui\n- Runtime Modules: @nuxt/ui@3.1.2, @pinia/nuxt@0.11.0, @nuxtjs/supabase@1.5.1, @nuxtjs/seo@3.0.3, @storyblok/nuxt@6.2.4\n- Build Modules: -\n------------------------------\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.1.2\n\n### Reproduction\n\nchange the border color(I assume should be this variable: --ui-border) in your project to red or blue and check if this color is applied when using only the classes: `border` or `border-b` without specifying the color.\n\n### Description\n\nI want to set the default border color, by default is very dark.\n\nI found that `--ui-border` variable is not used in the border style, maybe I could be wrong.\n\n\u003Cimg width=\"374\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/7f25806c-f5ea-43a1-a2a3-095d71448d43\" />\n\nthis is how the borders are styled in my case, no `--ui-border`\n\n\u003Cimg width=\"542\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/6bb3138e-36e5-46cb-9930-92b608811fe0\" />\n\n\u003Cimg width=\"515\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/16ad3bc6-a8a9-4391-a0c5-542ff3f58121\" />\n\nplease help, \n\nthank you\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3245,3246,3247],{"name":3181,"color":3182},{"name":3213,"color":3188},{"name":3184,"color":3185},4218,"Can't set the default border color","2025-05-26T08:34:37Z","https://github.com/nuxt/ui/issues/4218",0.6842973,{"description":3254,"labels":3255,"number":3261,"owner":3190,"repository":3191,"state":3237,"title":3262,"updated_at":3263,"url":3264,"score":3265},"### 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```",[3256,3257,3258],{"name":3181,"color":3182},{"name":3213,"color":3188},{"name":3259,"color":3260},"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.68545437,{"description":3267,"labels":3268,"number":3271,"owner":3190,"repository":3191,"state":3237,"title":3272,"updated_at":3273,"url":3274,"score":3275},"### 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```",[3269,3270],{"name":3181,"color":3182},{"name":3213,"color":3188},3268,"`UNavigationMenu` dropdown has wrong relative parent","2025-05-23T13:02:31Z","https://github.com/nuxt/ui/issues/3268",0.6868339,{"description":3277,"labels":3278,"number":3281,"owner":3190,"repository":3191,"state":3237,"title":3282,"updated_at":3283,"url":3284,"score":3285},"### Environment\n\nOperating System: Windows 11\nNode Version: v22.14.0\nNuxt Version: 3.15.4\nCLI Version: 3.13.2\nNitro Version: 2.10.4\nPackage Manager: npm@11.1.0\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.\n\n### Description\n\nHi\nWhen we use the arrow in the DropdownMenu component, a border is added to the last item. Apparently, this is because the arrow element is added at the end of the items groups in this component.\n\n\n\n\n\nI hope I was able to tell you what I meant. It's nothing special, but it would be great if it could be fixed. 🙄\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3279,3280],{"name":3181,"color":3182},{"name":3213,"color":3188},3315,"arrow causes appear border in the last item of DropdownMenu","2025-05-23T15:41:53Z","https://github.com/nuxt/ui/issues/3315",0.69286555,{"description":3287,"labels":3288,"number":3292,"owner":3190,"repository":3191,"state":3237,"title":3293,"updated_at":3294,"url":3295,"score":3296},"### 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",[3289,3290,3291],{"name":3181,"color":3182},{"name":3213,"color":3188},{"name":3184,"color":3185},4670,"`NavigationMenuItem` badge is not displayed when `0`","2025-10-06T10:40:25Z","https://github.com/nuxt/ui/issues/4670",0.69664,["Reactive",3298],{},["Set"],["ShallowReactive",3301],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fC3ZUHSFngBH2bvCcnuBhYmN0VibcmLH0GjRgG6hnr1E":-1},"/nuxt/ui/2766"]