\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```",[3157,3158,3159],{"name":3138,"color":3139},{"name":3141,"color":3142},{"name":3144,"color":3145},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.69842505,{"description":3166,"labels":3167,"number":3171,"owner":3147,"repository":3148,"state":3149,"title":3172,"updated_at":3173,"url":3174,"score":3175},"### 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```",[3168,3169,3170],{"name":3138,"color":3139},{"name":3141,"color":3142},{"name":3144,"color":3145},4682,"[NavigationMenu] v-model, value, default-value: does nothing","2025-08-08T08:39:46Z","https://github.com/nuxt/ui/issues/4682",0.7003693,{"description":3177,"labels":3178,"number":3182,"owner":3147,"repository":3147,"state":3149,"title":3183,"updated_at":3184,"url":3185,"score":3186},"### Environment\n\nNuxt Version: 3.16.0\n\n### Reproduction\n\nBreaks [on Nuxt](https://stackblitz.com/edit/github-tg6jd22e?file=app%2Frouter.options.ts) and works [on vue-router](https://codesandbox.io/p/sandbox/omitting-parent-component-k7vg8j).\n\n### Describe the bug\n\nSince vue-router 4.1 is possible to [omit a parent component on nested routes](https://router.vuejs.org/guide/essentials/nested-routes.html#Omitting-parent-components-), but when is done on Nuxt with [Custom routing](https://nuxt.com/docs/guide/recipes/custom-routing) breaks the navigation and never finish loading.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3179],{"name":3180,"color":3181},"pending triage","E99695",31753,"Omitting parent component on nested routes breaks navigation","2025-04-09T11:48:18Z","https://github.com/nuxt/nuxt/issues/31753",0.70323443,{"description":3188,"labels":3189,"number":3193,"owner":3147,"repository":3148,"state":3194,"title":3195,"updated_at":3196,"url":3197,"score":3198},"### 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```",[3190,3191,3192],{"name":3138,"color":3139},{"name":3141,"color":3142},{"name":3144,"color":3145},3911,"closed","[NavigationMenu] Vertical menu with children doesn't respect parent Link attributes.","2025-05-10T15:51:54Z","https://github.com/nuxt/ui/issues/3911",0.6713167,{"description":3200,"labels":3201,"number":3205,"owner":3147,"repository":3148,"state":3194,"title":3206,"updated_at":3207,"url":3208,"score":3209},"### Environment\n\nnot needed\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.1\n\n### Reproduction\n\ncheck current docs: https://ui.nuxt.com/components/navigation-menu#content-orientation\n\n### Description\n\n\n\nThe dropdown is at wrong position... also the \"arrow\" prop doesnt work\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3202,3203,3204],{"name":3138,"color":3139},{"name":3141,"color":3142},{"name":3144,"color":3145},4073,"UNavigationMenu: Dropdown broken","2025-05-13T12:02:03Z","https://github.com/nuxt/ui/issues/4073",0.6742683,{"description":3211,"labels":3212,"number":3216,"owner":3147,"repository":3148,"state":3194,"title":3217,"updated_at":3218,"url":3219,"score":3220},"### Environment\n\n- Operating System: Linux\n- Node Version: v20.12.0\n- Nuxt Version: 3.17.3\n- CLI Version: 3.25.1\n- Nitro Version: 2.11.12\n- Package Manager: pnpm@8.15.6\n- Builder: -\n- User Config: modules, devtools, compatibilityDate, future, css\n- Runtime Modules: @nuxt/ui@3.1.3\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.3\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/admiring-firefly-pw9d9p\n\n### Description\n\nUsing a vertical orientation along with `type=\"single\"`, if there is only one level of children, works great. Clicking on another item to select causes the current item to collapse and new one expands.\n\nWhen you have more nested levels though, clicking on child items bubbles up and closes all parents up to top.\n\nI've added two `UNavigationMenu` items, the first one has one level and works fine, the seconds one is where the issue is demonstrated.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3213,3214,3215],{"name":3138,"color":3139},{"name":3141,"color":3142},{"name":3144,"color":3145},4329,"`UNavigationMenu` nested accordions close all levels when `type=\"single\"`","2025-06-17T08:49:09Z","https://github.com/nuxt/ui/issues/4329",0.6776868,{"description":3222,"labels":3223,"number":3232,"owner":3147,"repository":3148,"state":3194,"title":3233,"updated_at":3234,"url":3235,"score":3236},"### Environment\n\n- Operating System: Darwin\n- Node Version: v23.3.0\n- Nuxt Version: 3.16.1\n- CLI Version: 3.23.1\n- Nitro Version: 2.11.7\n- Package Manager: pnpm@9.9.0\n- Builder: -\n- User Config: compatibilityDate, css, devtools, modules, colorMode, runtimeConfig, ui, app\n- Runtime Modules: @nuxt/ui@3.0.1, @nuxtjs/device@3.2.4\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.1\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/modest-euclid-j92wtc\n\n### Description\n\nThe v-model does not open the tab of the navigation bar if this is not a \"parent of children\" type of tab. It's confusing because there is no more \"isActive\" items status since the v3.\n\n### Additional context\n\n(it's my first time creating an issue, maybe I've done some things wrong during creation)\n\n### Logs\n\n```shell-script\n\n```",[3224,3225,3226,3227,3230],{"name":3138,"color":3139},{"name":3141,"color":3142},{"name":3144,"color":3145},{"name":3228,"color":3229},"closed-by-bot","ededed",{"name":3231,"color":3229},"stale",3650,"The NavigationMenu's v-model does not update correctly","2025-06-18T09:01:24Z","https://github.com/nuxt/ui/issues/3650",0.69618094,{"description":3238,"labels":3239,"number":3243,"owner":3147,"repository":3148,"state":3194,"title":3244,"updated_at":3245,"url":3246,"score":3247},"### Environment\n\n- Operating System: Darwin\n- Node Version: v24.5.0\n- Nuxt Version: 4.0.3\n- CLI Version: 3.28.0\n- Nitro Version: 2.12.4\n- Package Manager: pnpm@10.14.0\n- Builder: -\n- User Config: compatibilityDate, experimental, modules, css, content, routeRules, nitro, icon, site, robots, devtools, app\n- Runtime Modules: @nuxt/eslint@1.9.0, @nuxtjs/seo@3.1.0, nuxt-og-image@5.1.9, nuxt-schema-org@5.0.6, @nuxt/content@3.6.3, @nuxt/image@1.11.0, @nuxt/ui@3.3.2\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.3.2\n\n### Reproduction\n\nAdd `UNavigationMenu` with children and generate the output. The children are missing in the html.\n\n### Description\n\nHi there.\nI am building an Website with a big focus on SEO and noticed `UNavigationMenu` not rendering children in the SSR output.\nAs a result the child pages are not crawled and missing in the generated output.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3240,3241,3242],{"name":3138,"color":3139},{"name":3141,"color":3142},{"name":3144,"color":3145},4784,"NavigationMenu Children SSR/SSG","2025-08-25T13:58:44Z","https://github.com/nuxt/ui/issues/4784",0.700667,{"description":3249,"labels":3250,"number":3254,"owner":3147,"repository":3148,"state":3194,"title":3255,"updated_at":3256,"url":3257,"score":3258},"### Environment\n\nstandard docs\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.1.0\n\n### Reproduction\n\nUNavigation from the docs:\n\n\n\n### Description\n\nThe width of the elements does not expend over the full width of the dropdown\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3251,3252,3253],{"name":3138,"color":3139},{"name":3141,"color":3142},{"name":3144,"color":3145},3981,"UNavigationMenu: Dropdown width broken","2025-05-02T09:38:51Z","https://github.com/nuxt/ui/issues/3981",0.70233834,["Reactive",3260],{},["Set"],["ShallowReactive",3263],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fn9gNiRRbJV3JaMGuiY8gS8lFgWlkmGz6XRmAxT7o8TI":-1},"/nuxt/ui/4115"]