\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```",[3137,3140,3143],{"name":3138,"color":3139},"bug","d73a4a",{"name":3141,"color":3142},"v3","49DCB8",{"name":3144,"color":3145},"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.718048,{"description":3155,"labels":3156,"number":3162,"owner":3147,"repository":3148,"state":3149,"title":3163,"updated_at":3164,"url":3165,"score":3166},"### 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_",[3157,3160,3161],{"name":3158,"color":3159},"enhancement","a2eeef",{"name":3141,"color":3142},{"name":3144,"color":3145},4501,"Add external icon option to UButton and ULink","2025-07-11T09:39:53Z","https://github.com/nuxt/ui/issues/4501",0.7314197,{"description":3168,"labels":3169,"number":3172,"owner":3147,"repository":3148,"state":3149,"title":3173,"updated_at":3174,"url":3175,"score":3176},"### 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_",[3170,3171],{"name":3158,"color":3159},{"name":3144,"color":3145},4847,"[NavigationMenu] disabling trailing Icons globally and/or in NavigationMenuItems.","2025-08-29T20:09:39Z","https://github.com/nuxt/ui/issues/4847",0.73242617,{"description":3178,"labels":3179,"number":3180,"owner":3147,"repository":3181,"state":3149,"title":3182,"updated_at":3183,"url":3184,"score":3185},"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.7360315,{"description":3187,"labels":3188,"number":3192,"owner":3147,"repository":3148,"state":3149,"title":3193,"updated_at":3194,"url":3195,"score":3196},"### Environment\n\n- Operating System: Windows_NT\n- Node Version: v22.12.0\n- Nuxt Version: 3.17.4\n- CLI Version: 3.25.1\n- Nitro Version: 2.11.12\n- Package Manager: npm@10.9.0\n- User Config: compatibilityDate, devtools, ssr, future, app, css, modules, build, vite, eslint, i18n, runtimeConfig, experimental, imports\n- Runtime Modules: @nuxt/eslint@1.4.1, @nuxt/test-utils@3.19.1, @nuxt/ui@3.2.0, @nuxtjs/i18n@9.5.5\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.2.0\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/nuxt-ui3-n3sxks\n\n### Description\n\nThe UNavigationMenu component doesn't have built-in support for generating localized routes when using @nuxtjs/i18n. When using locale prefixes (e.g., /en/dashboard, /ar/dashboard), the navigation items don't automatically adapt to the current locale.\n\n### Expected behavior:\nThe component should automatically handle locale prefixes when @nuxtjs/i18n is configured, similar to how \u003CNuxtLink> works with localePath().\n\n### Proposed solution:\nAuto-detect @nuxtjs/i18n configuration\nApply localePath() internally to to props\nAdd optional localized prop for explicit control\nMaintain backward compatibility\n\nThis would eliminate boilerplate code and improve DX for internationalized applications using Nuxt UI navigation components.\n\n\n### Additional context\n\n**Current Workaround Required:**\n```vue\n\u003Cscript setup>\nconst { locale } = useI18n()\n\n// Manual helper function needed\nconst getLocalizedRoute = (path) => {\n if (locale.value === 'ar') {\n return `/example/ar${path}`\n }\n return `/example${path}`\n}\n\nconst sidebarItems = computed(() => [\n [{\n label: 'Dashboard',\n icon: 'i-lucide-home',\n to: getLocalizedRoute('/dashboard/'), // Manual localization\n }]\n])\n\u003C/script>\n```\n\n### Logs\n\n```shell-script\n\n```",[3189,3190,3191],{"name":3138,"color":3139},{"name":3141,"color":3142},{"name":3144,"color":3145},4465,"UNavigationMenu lacks built-in support for localized routes (i18n)","2025-07-06T14:40:52Z","https://github.com/nuxt/ui/issues/4465",0.7433278,{"description":3198,"labels":3199,"number":3202,"owner":3147,"repository":3148,"state":3203,"title":3204,"updated_at":3205,"url":3206,"score":3207},"### 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_",[3200,3201],{"name":3158,"color":3159},{"name":3141,"color":3142},4185,"closed","Allow `active` style on `UNavigationMenu` items when using `onSelect`","2025-05-19T15:38:25Z","https://github.com/nuxt/ui/issues/4185",0.6012161,{"description":3209,"labels":3210,"number":3215,"owner":3147,"repository":3148,"state":3203,"title":3216,"updated_at":3217,"url":3218,"score":3219},"### 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```",[3211,3214],{"name":3212,"color":3213},"question","d876e3",{"name":3141,"color":3142},3517,"How To Style NavigationMenu items","2025-05-10T11:36:22Z","https://github.com/nuxt/ui/issues/3517",0.6401128,{"description":3221,"labels":3222,"number":3230,"owner":3147,"repository":3148,"state":3203,"title":3231,"updated_at":3232,"url":3233,"score":3234},"### 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?",[3223,3224,3225,3228],{"name":3212,"color":3213},{"name":3141,"color":3142},{"name":3226,"color":3227},"closed-by-bot","ededed",{"name":3229,"color":3227},"stale",4279,"Targeting active menu styles","2025-08-20T02:08:31Z","https://github.com/nuxt/ui/issues/4279",0.6484528,{"description":3236,"labels":3237,"number":3242,"owner":3147,"repository":3148,"state":3203,"title":3243,"updated_at":3244,"url":3245,"score":3246},"### 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.",[3238,3239,3240,3241],{"name":3212,"color":3213},{"name":3141,"color":3142},{"name":3226,"color":3227},{"name":3229,"color":3227},4254,"NavigationMenu transitions/animations on toggle collapsed state","2025-08-20T02:08:33Z","https://github.com/nuxt/ui/issues/4254",0.72020936,{"description":3248,"labels":3249,"number":3252,"owner":3147,"repository":3148,"state":3203,"title":3253,"updated_at":3254,"url":3255,"score":3256},"### Description\n\nI'm wondering how I can style the active dot on the component level through the :ui prop.",[3250,3251],{"name":3212,"color":3213},{"name":3141,"color":3142},4228,"Carousel: Can I style the active dot through the :ui prop?","2025-05-26T15:48:31Z","https://github.com/nuxt/ui/issues/4228",0.7209047,["Reactive",3258],{},["Set"],["ShallowReactive",3261],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fuC049kdFpnaiZmDtrBCyM-KWM-loJAbc4P-SuyZPZBs":-1},"/nuxt/ui/4849"]