\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```",[3038,3039,3040],{"name":3019,"color":3020},{"name":3022,"color":3023},{"name":3025,"color":3026},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":3047,"labels":3048,"number":3052,"owner":3028,"repository":3028,"state":3030,"title":3053,"updated_at":3054,"url":3055,"score":3056},"### 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```",[3049],{"name":3050,"color":3051},"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":3058,"labels":3059,"number":3063,"owner":3028,"repository":3029,"state":3064,"title":3065,"updated_at":3066,"url":3067,"score":3068},"### 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```",[3060,3061,3062],{"name":3019,"color":3020},{"name":3022,"color":3023},{"name":3025,"color":3026},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":3070,"labels":3071,"number":3075,"owner":3028,"repository":3029,"state":3064,"title":3076,"updated_at":3077,"url":3078,"score":3079},"### 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```",[3072,3073,3074],{"name":3019,"color":3020},{"name":3022,"color":3023},{"name":3025,"color":3026},4073,"UNavigationMenu: Dropdown broken","2025-05-13T12:02:03Z","https://github.com/nuxt/ui/issues/4073",0.6742683,{"description":3081,"labels":3082,"number":3086,"owner":3028,"repository":3029,"state":3064,"title":3087,"updated_at":3088,"url":3089,"score":3090},"### 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```",[3083,3084,3085],{"name":3019,"color":3020},{"name":3022,"color":3023},{"name":3025,"color":3026},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":3092,"labels":3093,"number":3102,"owner":3028,"repository":3029,"state":3064,"title":3103,"updated_at":3104,"url":3105,"score":3106},"### 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```",[3094,3095,3096,3097,3100],{"name":3019,"color":3020},{"name":3022,"color":3023},{"name":3025,"color":3026},{"name":3098,"color":3099},"closed-by-bot","ededed",{"name":3101,"color":3099},"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":3108,"labels":3109,"number":3113,"owner":3028,"repository":3029,"state":3064,"title":3114,"updated_at":3115,"url":3116,"score":3117},"### 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```",[3110,3111,3112],{"name":3019,"color":3020},{"name":3022,"color":3023},{"name":3025,"color":3026},3981,"UNavigationMenu: Dropdown width broken","2025-05-02T09:38:51Z","https://github.com/nuxt/ui/issues/3981",0.70233834,{"labels":3119,"number":3129,"owner":3028,"repository":3028,"state":3064,"title":3130,"updated_at":3131,"url":3132,"score":3133},[3120,3123,3126],{"name":3121,"color":3122},"enhancement","8DEF37",{"name":3124,"color":3125},"3.x","29bc7f",{"name":3127,"color":3128},"dx","C39D69",13828,"Navigation fails if pages do not have single root element","2023-09-12T14:58:48Z","https://github.com/nuxt/nuxt/issues/13828",0.7083661,{"description":3135,"labels":3136,"number":3139,"owner":3028,"repository":3029,"state":3064,"title":3140,"updated_at":3141,"url":3142,"score":3143},"### 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```",[3137,3138],{"name":3019,"color":3020},{"name":3022,"color":3023},3268,"`UNavigationMenu` dropdown has wrong relative parent","2025-05-23T13:02:31Z","https://github.com/nuxt/ui/issues/3268",0.70936453,["Reactive",3145],{},["Set"],["ShallowReactive",3148],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fn9gNiRRbJV3JaMGuiY8gS8lFgWlkmGz6XRmAxT7o8TI":-1},"/nuxt/ui/4115"]