\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,3041,3042],{"name":3039,"color":3040},"bug","d73a4a",{"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.7173766,{"description":3049,"labels":3050,"number":3054,"owner":3028,"repository":3029,"state":3030,"title":3055,"updated_at":3056,"url":3057,"score":3058},"### Environment\n\n- Browser: Safari 18.3\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.3\n\n### Reproduction\n\n## Nuxt UI Website\nhttps://github.com/user-attachments/assets/cba84f65-4c8f-4398-ae34-d2844b2ad767\n\n## My Project\nhttps://github.com/user-attachments/assets/7a88b397-14dc-4150-b396-7e1fbd1a0b7e\n\nThis by the way is not happening with the `UTabs` Example shown in the documentation.\n\n## Documentation\nhttps://github.com/user-attachments/assets/9432385f-141b-4d58-bf28-af2a68833dae\n\n### Description\n\nOn Safari (tested with 18.3) `UTabs` is flickering when switching tabs. Since this also happens on the Nuxt UI Webpage I have not created a minimal reproduction.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3051,3052,3053],{"name":3039,"color":3040},{"name":3022,"color":3023},{"name":3025,"color":3026},4280,"`UTabs` trigger flickers when switching tabs (Safari-only)","2025-06-02T13:28:06Z","https://github.com/nuxt/ui/issues/4280",0.7214121,{"description":3060,"labels":3061,"number":3070,"owner":3028,"repository":3028,"state":3030,"title":3071,"updated_at":3072,"url":3073,"score":3074},"We might build these directly into nuxt or possibly via a core or adhoc module or even decoupled module like `nuxt/a11y`.\r\n\r\n```[tasklist]\r\n### Tasks\r\n- [ ] https://github.com/nuxt/nuxt/issues/14673\r\n- [ ] https://github.com/nuxt/nuxt/issues/23375\r\n- [ ] built-in [axe core](https://github.com/dequelabs/axe-core)\r\n- [ ] devtools integration? cc: @antfu\r\n- [ ] other built-in components or composables, e.g. for announcement?\r\n- [ ] a convenient way to move focus on every navigation\r\n- [ ] skip links for traversing to/from the top-most layout that changed\r\n```\r\n",[3062,3064,3067],{"name":3019,"color":3063},"8DEF37",{"name":3065,"color":3066},"🍰 p2-nice-to-have","0E8A16",{"name":3068,"color":3069},"a11y","872BA1",23255,"Accessibility roadmap","2024-09-11T21:09:52Z","https://github.com/nuxt/nuxt/issues/23255",0.730076,{"description":3076,"labels":3077,"number":3085,"owner":3028,"repository":3028,"state":3030,"title":3086,"updated_at":3087,"url":3088,"score":3089},"### Describe the feature\n\nI think it is a common use case (at least I have it a lot) that you want to have some side effects when navigating via NuxtLink that need to wait until the navigation is complete, e.g. if you have a link in a menu or dropdown that should close when clicking the link. If the target page is complex and takes a few hundred ms to render there is a strange flicker if you you do not await \"navigation complete\", aka. the menu closes but still shows the current page for two blinks of an eye before the new page shows up.\r\n\r\nA simple solution would be the following:\r\n\r\n```vue\r\n\u003CNuxtLink\r\n to=\"/some-page\"\r\n title=\"Some page\"\r\n @navigation-complete=\"closeMenu()\"\r\n/>\r\n```\r\n\r\nI think implementation should be simple. In the NuxtLink component we would just need to do\r\n\r\n```ts\r\nnavigateTo(...)\r\n // New:\r\n .then(emit('navigationComplete', to))\r\n```\r\n\r\nI guess???\r\n\r\nIf that seems useful I might try my luck with a PR...\n\n### Additional information\n\n- [x] 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://nuxt.com/docs/community/contribution).\n- [X] Check existing [discussions](https://github.com/nuxt/nuxt/discussions) and [issues](https://github.com/nuxt/nuxt/issues).",[3078,3079,3082],{"name":3019,"color":3063},{"name":3080,"color":3081},"discussion","538de2",{"name":3083,"color":3084},"pages","00DFB5",19928,"Emit \"navigation-complete\" event on NuxtLink","2024-06-30T11:09:10Z","https://github.com/nuxt/nuxt/issues/19928",0.733809,{"description":3091,"labels":3092,"number":3095,"owner":3028,"repository":3029,"state":3096,"title":3097,"updated_at":3098,"url":3099,"score":3100},"### For what version of Nuxt UI are you suggesting this?\n\nv3.0.0-alpha.x\n\n### Description\n\nUTabs documentation could benefit from an example of how to use it to display nested pages. An example use case could be a profile page with tabs for profile information and settings, where navigating through each would lead to a sub-page (profile information being in /profile, and settings being in /profile/settings)\n\n### Additional context\n\n_No response_",[3093,3094],{"name":3019,"color":3020},{"name":3022,"color":3023},2872,"closed","[v3 docs]: example for nested pages with UTabs","2025-06-11T09:23:00Z","https://github.com/nuxt/ui/issues/2872",0.69214576,{"description":3102,"labels":3103,"number":3104,"owner":3028,"repository":3105,"state":3096,"title":3106,"updated_at":3107,"url":3108,"score":3109},"- [ ] Search\n- [ ] Subnavbar Links\n- [ ] Examples\n- [ ] Community / Open Source Guides\n- [ ] v2 migration nuxtjs.org",[],1306,"nuxt.com","Documentation Update","2023-07-10T12:42:01Z","https://github.com/nuxt/nuxt.com/issues/1306",0.710592,{"description":3111,"labels":3112,"number":3116,"owner":3028,"repository":3029,"state":3096,"title":3117,"updated_at":3118,"url":3119,"score":3120},"### Description\n\nI was looking to implement tooltip for NavigationMenu links as it was available in the DashboardSidebarLinks component in v2. But seems like the feature is no longer present in v3. \n\nhttps://ui2.nuxt.com/pro/components/dashboard-sidebar-links\n\nLet me know if there is still a simple way to implement tooltips specially in the collapsed Sidebar. I don't wanna go down with the slots approach. It looks dirty.\n\n\n\n### Additional context\n\nThis is what I have to do in order to get it to work. I believe this should be part of Nuxt UI already.\n\n``` js\n\u003CUNavigationMenu :collapsed=\"collapsed\" :items=\"links\" orientation=\"vertical\">\n \u003Ctemplate #item-leading=\"{ item }\">\n \u003CUTooltip :disabled=\"!collapsed\" :text=\"item.label\">\n \u003CUIcon\n :name=\"item.icon || ''\"\n class=\"text-dimmed group-hover:text-default size-5 shrink-0 transition-colors\"\n />\n \u003C/UTooltip>\n \u003C/template>\n\u003C/UNavigationMenu>\n```",[3113,3114,3115],{"name":3019,"color":3020},{"name":3022,"color":3023},{"name":3025,"color":3026},4050,"NavigationMenu has no way to apply a tooltip.","2025-05-10T11:36:41Z","https://github.com/nuxt/ui/issues/4050",0.7175627,{"labels":3122,"number":3127,"owner":3028,"repository":3028,"state":3096,"title":3128,"updated_at":3129,"url":3130,"score":3131},[3123,3124],{"name":3019,"color":3063},{"name":3125,"color":3126},"3.x","29bc7f",13322,"provide universal route handling utilities","2023-01-19T16:52:31Z","https://github.com/nuxt/nuxt/issues/13322",0.728303,{"description":3133,"labels":3134,"number":3140,"owner":3028,"repository":3029,"state":3096,"title":3141,"updated_at":3142,"url":3143,"score":3144},"### Environment\n\n- Operating System: Darwin\n- Node Version: v20.11.1\n- Nuxt Version: 3.16.2\n- CLI Version: 3.25.1\n- Nitro Version: 2.11.12\n- Package Manager: npm@10.2.4\n- Builder: -\n- User Config: css, compatibilityDate, devtools, future, modules, runtimeConfig, ssr, typescript\n- Runtime Modules: @nuxt/eslint@1.4.0, @nuxt/fonts@0.11.4, @nuxt/ui-pro@3.1.2, @pinia/nuxt@0.5.5, @vueuse/nuxt@10.11.1, nuxt-auth-utils@0.5.20, nuxt-authorization@0.3.4\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.2\n\n### Reproduction\n\nJust use the code of https://github.com/nuxt-ui-pro/dashboard/blob/main/app/pages/settings.vue and add a child to one of the links used for the UNavigationMenu. Like :\n````\n{\n label: \"General\",\n icon: \"i-lucide-user\",\n to: \"/settings\",\n children: [\n {\n label: \"Hello\",\n icon: \"i-lucide-book-open\",\n },\n ],\n exact: true,\n },\n````\n\n### Description\n\nIt seems wrapping the UNavigationMenu component in UDashboardToolbar will cause the UNavigationMenu's links children dropdown to not appear or be hidden.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3135,3136,3137],{"name":3039,"color":3040},{"name":3022,"color":3023},{"name":3138,"color":3139},"nuxt/ui-pro","00dc82",4177,"UNavigationMenu item children not visible when wrapped in UDashboardToolbar","2025-05-23T12:23:17Z","https://github.com/nuxt/ui/issues/4177",0.72879523,["Reactive",3146],{},["Set"],["ShallowReactive",3149],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fzed_cOL1510M5H4qYZBkrEnGSJDJja2eOtYcqlp3G98":-1},"/nuxt/ui/4092"]