\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```",[3018,3021,3024],{"name":3019,"color":3020},"bug","d73a4a",{"name":3022,"color":3023},"v3","49DCB8",{"name":3025,"color":3026},"triage","ffffff",4416,"nuxt","ui","open","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.7177381,{"description":3036,"labels":3037,"number":3043,"owner":3028,"repository":3029,"state":3030,"title":3044,"updated_at":3045,"url":3046,"score":3047},"### 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_",[3038,3041,3042],{"name":3039,"color":3040},"enhancement","a2eeef",{"name":3022,"color":3023},{"name":3025,"color":3026},4591,"Documentation: Styling of indicator in Tabs and NavigationMenu","2025-07-24T15:51:09Z","https://github.com/nuxt/ui/issues/4591",0.72801167,{"description":3049,"labels":3050,"number":3051,"owner":3028,"repository":3052,"state":3030,"title":3053,"updated_at":3054,"url":3055,"score":3056},"According to the [Vue-Iconify Docs](https://iconify.design/docs/icon-components/vue/transform.html#rotation) one can pass a `rotate` and `flip` Prop to transform the Icon, to display it in different orientations.\r\n\r\n```vue\r\n\u003Ctemplate>\r\n \u003CIcon name=\"ic:round-double-arrow\" size=\"26\" :rotate=\"flip && '2'\" />\r\n\u003C/template>\r\n\r\n\u003Cscript setup lang=\"ts\">\r\nconst flip = ref(false);\r\n\u003C/script>\r\n```\r\n\r\nWhile this works fine with nuxt-icon during development, it breaks in a Prod build. The transformations no longer get applied.\r\n\r\nIt would be great if nuxt-icon could also support these props, if possible. I'm open to help with this issue if someone could give me some pointers where to start.",[],138,"icon","[Feature Request] Support Iconify Transformations","2024-03-15T09:15:14Z","https://github.com/nuxt/icon/issues/138",0.7291751,{"description":3058,"labels":3059,"number":3063,"owner":3028,"repository":3029,"state":3030,"title":3064,"updated_at":3065,"url":3066,"score":3067},"### 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```",[3060,3061,3062],{"name":3019,"color":3020},{"name":3022,"color":3023},{"name":3025,"color":3026},4530,"[UInputTags, UInputMenu] Theming behaviour issues","2025-07-15T17:50:02Z","https://github.com/nuxt/ui/issues/4530",0.74395496,{"description":3069,"labels":3070,"number":3076,"owner":3028,"repository":3029,"state":3030,"title":3077,"updated_at":3078,"url":3079,"score":3080},"",[3071,3072,3073],{"name":3039,"color":3040},{"name":3022,"color":3023},{"name":3074,"color":3075},"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.7520009,{"description":3082,"labels":3083,"number":3088,"owner":3028,"repository":3029,"state":3089,"title":3090,"updated_at":3091,"url":3092,"score":3093},"### 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```",[3084,3087],{"name":3085,"color":3086},"question","d876e3",{"name":3022,"color":3023},3517,"closed","How To Style NavigationMenu items","2025-05-10T11:36:22Z","https://github.com/nuxt/ui/issues/3517",0.6608726,{"description":3095,"labels":3096,"number":3099,"owner":3028,"repository":3029,"state":3089,"title":3100,"updated_at":3101,"url":3102,"score":3103},"### Description\n\nWhen using \u003CUNavigationMenu> with onSelect (instead of to), there's no way to manually set the active state on items. It would be helpful to support an active prop or a value binding (like in buttons #3417) to reflect the selected state visually.\n\n### Additional context\n\n_No response_",[3097,3098],{"name":3039,"color":3040},{"name":3022,"color":3023},4185,"Allow `active` style on `UNavigationMenu` items when using `onSelect`","2025-05-19T15:38:25Z","https://github.com/nuxt/ui/issues/4185",0.6850153,{"description":3105,"labels":3106,"number":3109,"owner":3028,"repository":3029,"state":3089,"title":3110,"updated_at":3111,"url":3112,"score":3113},"### Description\n\nI'm trying to apply styling to specific elements, this is my current code for initializing my NavigationMenu items:\n```js\nconst items = ref\u003CNavigationMenuItem[]>([\n [\n {\n label: \"Something\",\n icon: \"\",\n to: \"/\"\n }\n ],\n [\n {\n icon: \"i-simple-icons-discord\",\n to: \"https://discord.gg/....\"\n }\n ]\n ])\n```\n\nI am trying to apply styling using tailwind like you would via `:ui=\"\"` on the `UNavigationMenu` element but in this case I want to change `linkLeadingIcon` only for the discord element, and replace `list` entirely for the `Something` element. I've been scouring the docs and such and I haven't been able to really find a way to do this. As far as I can tell I can't do styling based on label/icon/etc using compound variants.\n\nI'm fairly new to Nuxt UI so might be missing a obvious solution, thanks!",[3107,3108],{"name":3085,"color":3086},{"name":3022,"color":3023},3683,"NavigationMenu styling for specific items","2025-04-18T18:47:43Z","https://github.com/nuxt/ui/issues/3683",0.69762,{"description":3115,"labels":3116,"number":3119,"owner":3028,"repository":3029,"state":3089,"title":3120,"updated_at":3121,"url":3122,"score":3123},"### Description\n\nIt seems impossible to me to style the [ULink](https://ui.nuxt.com/components/link#theme) component in `app.config.ts`. I tried every possible combination, but I just cant update active/inactive state:\n\n```ts\nlink: {\n base: 'focus-visible:outline-primary',\n variants: {\n active: {\n true: 'text-red-500',\n false: 'text-blue-500',\n },\n },\n },\n```\n\nWhat works is base, but variants doesnt work.",[3117,3118],{"name":3085,"color":3086},{"name":3022,"color":3023},4505,"How to theme/style ULink? (Possible bug)","2025-07-11T15:28:18Z","https://github.com/nuxt/ui/issues/4505",0.71096593,{"description":3125,"labels":3126,"number":3133,"owner":3028,"repository":3028,"state":3089,"title":3134,"updated_at":3135,"url":3136,"score":3137},"### Describe the feature\n\nAs you can see, I selected API, But there is no any flag style,So i don't know which nav i has selected.Thanks!\r\n\r\n\u003Cimg width=\"1119\" alt=\"image\" src=\"https://user-images.githubusercontent.com/16911432/188371118-063d7239-85e0-4e94-9b9a-5004b84d0079.png\">\r\n\n\n### Additional information\n\n- [ ] Would you be willing to help implement this feature?\n- [ ] Could this feature be implemented as a module?\n\n### Final checks\n\n- [X] Read the [contribution guide](https://v3.nuxtjs.org/community/contribution).\n- [X] Check existing [discussions](https://github.com/nuxt/framework/discussions) and [issues](https://github.com/nuxt/framework/issues).",[3127,3130],{"name":3128,"color":3129},"documentation","5319e7",{"name":3131,"color":3132},"3.x","29bc7f",14795,"why the class `nuxt-link-exact-active` or `nuxt-link-active` have not set other style when selected","2023-01-19T17:40:37Z","https://github.com/nuxt/nuxt/issues/14795",0.7363429,["Reactive",3139],{},["Set"],["ShallowReactive",3142],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fPoAeJ6R4zKvRs79ubV6ENkC5Ut_BunLIxSZ2NUR76hY":-1},"/nuxt/ui/4279"]