\n```",[3145],{"name":3146,"color":3147},"question","d876e3",4849,"nuxt","ui","open","Can `UNavigationMenu` support active styles via the ui prop?","2025-08-30T10:29:01Z","https://github.com/nuxt/ui/issues/4849",0.5905534,{"description":3157,"labels":3158,"number":3168,"owner":3149,"repository":3150,"state":3151,"title":3169,"updated_at":3170,"url":3171,"score":3172},"### Description\n\nWhen using `multiple` with `USelectMenu` selected items can be deselected again. But when not having `multipe` option this is not the case. The select goes from undefined to a value and then can never become undefined again (without an external button).\n\nI would propose to add a new prop that allows values to be deselected, so the model becomes undefined again.\n\n### Additional context\n\n_No response_",[3159,3162,3165],{"name":3160,"color":3161},"enhancement","a2eeef",{"name":3163,"color":3164},"v3","49DCB8",{"name":3166,"color":3167},"triage","ffffff",4647,"`USelectMenu`: Allow deselection of items","2025-08-02T13:00:23Z","https://github.com/nuxt/ui/issues/4647",0.7035029,{"description":3174,"labels":3175,"number":3179,"owner":3149,"repository":3150,"state":3151,"title":3180,"updated_at":3181,"url":3182,"score":3183},"### Description\n\nUsing `\u003CUNavigationMenu>` it adds an external icon when prop `to` is an external link: \n\n\u003Cimg width=\"196\" height=\"69\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/e7417d54-ca16-48c2-9992-a54a9bed764d\" />\n\nUnfortunately, `UButton` doesnt have this feature. Even with the prop `trailingIcon` the same behavior cant be archived manually in an easy manner because the icon wont be small, at the top and grayed out. Currently it would require to make it fully manually:\n\n```\n\u003CUButton :to=\"externalUrl\" target=\"_blank\">\n \u003Cspan\n >To external provider\u003CIcon\n name=\"i-material-symbols:arrow-outward-rounded\"\n class=\"size-3 align-top opacity-70\"\n />\u003C/span>\n \u003C/UButton>\n```\n\n\u003Cimg width=\"191\" height=\"48\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/f89198d7-a64f-4a04-815b-41ddba68c3cc\" />\n\nIt would be great if a button would either automatically add the icon, like `\u003CUNavigationMenu>` does, or would have a prop `externalIcon` that can be set to true.\n\n### Additional context\n\n\n\n_No response_",[3176,3177,3178],{"name":3160,"color":3161},{"name":3163,"color":3164},{"name":3166,"color":3167},4501,"Add external icon option to UButton and ULink","2025-07-11T09:39:53Z","https://github.com/nuxt/ui/issues/4501",0.7353722,{"description":3185,"labels":3186,"number":3192,"owner":3149,"repository":3150,"state":3151,"title":3193,"updated_at":3194,"url":3195,"score":3196},"### 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```",[3187,3190,3191],{"name":3188,"color":3189},"bug","d73a4a",{"name":3163,"color":3164},{"name":3166,"color":3167},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.74484116,{"description":3198,"labels":3199,"number":3205,"owner":3149,"repository":3150,"state":3151,"title":3206,"updated_at":3207,"url":3208,"score":3209},"",[3200,3201,3202],{"name":3160,"color":3161},{"name":3163,"color":3164},{"name":3203,"color":3204},"reka-ui","56d799",2337,"[DropdownMenu/Popover/Tooltip] Improve arrow styling like `NavigationMenu` ","2024-10-08T10:12:48Z","https://github.com/nuxt/ui/issues/2337",0.7490995,{"description":3211,"labels":3212,"number":3216,"owner":3149,"repository":3150,"state":3151,"title":3217,"updated_at":3218,"url":3219,"score":3220},"### Environment\n\n- Node Version: v22.17.1\n- Nuxt Version: 4.0.3\n- CLI Version: 3.27.0\n- Nitro Version: 2.12.4\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.3.0\n\n### Reproduction\n\nhttps://ui.nuxt.com/components/navigation-menu#control-active-item\n\n### Description\n\nas per title, seems that manual active control is not working at all even in docs https://ui.nuxt.com/components/navigation-menu#control-active-item\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3213,3214,3215],{"name":3188,"color":3189},{"name":3163,"color":3164},{"name":3166,"color":3167},4682,"[NavigationMenu] v-model, value, default-value: does nothing","2025-08-08T08:39:46Z","https://github.com/nuxt/ui/issues/4682",0.74989504,{"description":3222,"labels":3223,"number":3226,"owner":3149,"repository":3150,"state":3151,"title":3227,"updated_at":3228,"url":3229,"score":3230},"### Package\n\nv4.0.0-alpha.x\n\n### Description\n\nIt's currently not possible to disable trailing icons globally or in items for items with children. \nI would like to implement a new prop: disableTrailingIcon(s).\n\nShould this prop appear in NavigationMenuItem too?\n\n### Additional context\n\n_No response_",[3224,3225],{"name":3160,"color":3161},{"name":3166,"color":3167},4847,"[NavigationMenu] disabling trailing Icons globally and/or in NavigationMenuItems.","2025-08-29T20:09:39Z","https://github.com/nuxt/ui/issues/4847",0.7503995,{"description":3232,"labels":3233,"number":3241,"owner":3149,"repository":3150,"state":3242,"title":3243,"updated_at":3244,"url":3245,"score":3246},"### Description\n\n## No Clear Documentation for Targeting Active Styles in `NavigationMenu` Component\n\n### Description\n\nI'm trying to apply custom styles to the active state of a menu item in the `NavigationMenu` component, but there doesn't seem to be any clear documentation on how to do this.\n\nThe [theming docs](https://ui.nuxt.com/getting-started/theme#props) mention using the `:ui` attribute to target internal parts of a component, and the [theme structure for `NavigationMenu`](https://ui.nuxt.com/components/navigation-menu#theme) shows a large theme object. However, attempting to follow that structure often results in unexpected behavior—like rendering `[object Object]`, which suggests that it doesn't expect an object or the nested configuration isn’t being parsed correctly.\n\nEven large language models get tripped up when referencing the documentation. Some approaches I've tried (unsuccessfully) include:\n\n```js\nlink: {\n base: 'px-3 py-2 rounded-md',\n active: 'bg-primary text-white font-medium'\n},\nvariants: {\n active: {\n true: {\n item: 'bg-primary text-white font-medium'\n }\n }\n}\n```\n\nThe only working solution so far is using data-* attributes like this:\n```js\nlink: 'text-md data-active:bg-primary data-active:text-white'\n```\nWhile this works, it’s undocumented and feels fragile—it could easily break with a future update if it’s not the intended method.\n\n### Question\nWhat is the official and supported way to apply styles based on active state for subcomponents like link in NavigationMenu?",[3234,3235,3236,3239],{"name":3146,"color":3147},{"name":3163,"color":3164},{"name":3237,"color":3238},"closed-by-bot","ededed",{"name":3240,"color":3238},"stale",4279,"closed","Targeting active menu styles","2025-08-20T02:08:31Z","https://github.com/nuxt/ui/issues/4279",0.6786558,{"description":3248,"labels":3249,"number":3252,"owner":3149,"repository":3150,"state":3242,"title":3253,"updated_at":3254,"url":3255,"score":3256},"### 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```",[3250,3251],{"name":3146,"color":3147},{"name":3163,"color":3164},3517,"How To Style NavigationMenu items","2025-05-10T11:36:22Z","https://github.com/nuxt/ui/issues/3517",0.69902706,{"description":3258,"labels":3259,"number":3263,"owner":3149,"repository":3150,"state":3242,"title":3264,"updated_at":3265,"url":3266,"score":3267},"### Description\n\nIt is very non-obvious, how to customize the style of indicator in Tabs and NavigationMenu components.\nI try to change the position of indicator to top of the link when NavigationMenu is in mobile mode (sticked to the bottom of the screen), but can't figure out how to do it.\nAlso try to make the text bold and background highlighted with border around and gradient in Tabs component.\n\n### Additional context\n\n_No response_",[3260,3261,3262],{"name":3160,"color":3161},{"name":3163,"color":3164},{"name":3166,"color":3167},4591,"Documentation: Styling of indicator in Tabs and NavigationMenu","2025-08-20T08:43:07Z","https://github.com/nuxt/ui/issues/4591",0.72747886,["Reactive",3269],{},["Set"],["ShallowReactive",3272],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fMJobbuBjPn2nvjjemqsHDpRq4jZIAJtqk_dZ1AFeN2U":-1},"/nuxt/ui/4185"]