\n\nAs a result, we may need to update the layout and how the banner component is used.\n\nI apologise for any inconvenience caused by design decisions, but we are committed to creating the best Nuxt UI framework possible. 😊 \n\nLet me know your thoughts on it.",[3157,3160],{"name":3158,"color":3159},"question","d876e3",{"name":3161,"color":3142},"v4",4955,"[Discussion] As per the Semantic HTML structure navigation \u003Caside> should not be inside \u003Cmain> tag","2025-09-12T11:19:44Z","https://github.com/nuxt/ui/issues/4955",0.7138384,{"description":3168,"labels":3169,"number":3175,"owner":3147,"repository":3148,"state":3149,"title":3176,"updated_at":3177,"url":3178,"score":3179},"### Environment\n\n\"nuxt\": \"^3.17.5\",\n\"@nuxt/ui\": \"^3.1.3\",\n\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.1.3\n\n### Reproduction\n\nFollowing is my `components/AppHeader.vue`:\n\n```\n\u003Ctemplate>\n \u003Cheader class=\"bg-white sticky top-0 z-50\">\n \u003Cnav class=\"hidden lg:flex flex-1 justify-center\">\n \u003CUNavigationMenu\n v-model=\"activeSection\"\n :items=\"navItems\"\n class=\"space-x-2\"\n highlight\n highlight-color=\"primary\"\n >\n \u003Ctemplate #item=\"{ item, active }\">\n \u003CULink\n as-child\n :to=\"{ path: '', hash: `#${item.to}` }\"\n exact-hash\n class=\"px-4 py-2 rounded-md transition\"\n aria-label=\"Go to {{ item.label }}\"\n >\n \u003Cspan class=\"inline-flex items-center\">\n \u003CUIcon v-if=\"item.icon\" :name=\"item.icon\" class=\"size-5 mr-2\" />\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```",[3170,3173,3174],{"name":3171,"color":3172},"bug","d73a4a",{"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.7173766,{"description":3181,"labels":3182,"number":3186,"owner":3147,"repository":3148,"state":3149,"title":3187,"updated_at":3188,"url":3189,"score":3190},"### 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```",[3183,3184,3185],{"name":3171,"color":3172},{"name":3141,"color":3142},{"name":3144,"color":3145},4280,"`UTabs` trigger flickers when switching tabs (Safari-only)","2025-06-02T13:28:06Z","https://github.com/nuxt/ui/issues/4280",0.7214121,{"description":3192,"labels":3193,"number":3202,"owner":3147,"repository":3147,"state":3149,"title":3203,"updated_at":3204,"url":3205,"score":3206},"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",[3194,3196,3199],{"name":3138,"color":3195},"8DEF37",{"name":3197,"color":3198},"🍰 p2-nice-to-have","0E8A16",{"name":3200,"color":3201},"a11y","872BA1",23255,"Accessibility roadmap","2024-09-11T21:09:52Z","https://github.com/nuxt/nuxt/issues/23255",0.730076,{"description":3208,"labels":3209,"number":3217,"owner":3147,"repository":3147,"state":3149,"title":3218,"updated_at":3219,"url":3220,"score":3221},"### 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).",[3210,3211,3214],{"name":3138,"color":3195},{"name":3212,"color":3213},"discussion","538de2",{"name":3215,"color":3216},"pages","00DFB5",19928,"Emit \"navigation-complete\" event on NuxtLink","2024-06-30T11:09:10Z","https://github.com/nuxt/nuxt/issues/19928",0.733809,{"description":3223,"labels":3224,"number":3228,"owner":3147,"repository":3147,"state":3149,"title":3229,"updated_at":3230,"url":3231,"score":3232},"### Describe the feature\n\nIt would be great if Nuxt UI could provide a built-in, customizable **feature tour / onboarding guide** component. This would allow developers to guide users through key parts of an application with step-by-step tooltips and highlighted elements.\n\n**Motivation**\n\n* Helps improve user onboarding and product discovery.\n* Provides a consistent and reusable UI pattern for walkthroughs across Nuxt projects.\n* Currently, developers must rely on external libraries (e.g., Driver.js, Shepherd.js) or build a custom solution. A Nuxt UI-native solution would integrate seamlessly with existing components and theming.\n\n**Proposed Features**\n\n* Ability to define **steps** with `selector`, `title`, `description`, and `position`.\n* Configurable **highlight styles** (border, shadow, spotlight cut-out).\n* Built-in **navigation controls** (Next, Previous, Finish).\n* Option to scroll to target elements automatically.\n* Theming support with Nuxt UI tokens.\n* Accessibility support (keyboard navigation, ARIA roles).\n\n**Example API (pseudo-code)**\n\n```vue\n\u003CUTour :steps=\"steps\" v-model=\"active\" />\n\n\u003Cscript setup lang=\"ts\">\nconst steps = [\n { selector: '#step1', title: 'Welcome', description: 'This is the first step', position: 'bottom' },\n { selector: '#step2', title: 'Next Feature', description: 'Learn about this one too', position: 'right' }\n]\n\u003C/script>\n```\n\n**Alternatives Considered**\n\n* External libraries like Driver.js or Shepherd.js, but they don’t fit Nuxt UI’s design system and require additional integration effort.\n\n**Additional Context**\nThis would help Nuxt developers deliver a polished onboarding experience without reinventing the wheel.\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://nuxt.com/docs/community/contribution).\n- [x] Check existing [discussions](https://github.com/nuxt/nuxt/discussions) and [issues](https://github.com/nuxt/nuxt/issues).",[3225],{"name":3226,"color":3227},"pending triage","E99695",33111,"Interactive Feature Tour Component","2025-09-02T09:15:22Z","https://github.com/nuxt/nuxt/issues/33111",0.73761463,{"description":3223,"labels":3234,"number":3235,"owner":3147,"repository":3148,"state":3149,"title":3229,"updated_at":3236,"url":3237,"score":3238},[],4874,"2025-09-02T12:21:11Z","https://github.com/nuxt/ui/issues/4874",0.73826945,{"description":3240,"labels":3241,"number":3244,"owner":3147,"repository":3148,"state":3245,"title":3246,"updated_at":3247,"url":3248,"score":3249},"### 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_",[3242,3243],{"name":3138,"color":3139},{"name":3141,"color":3142},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":3251,"labels":3252,"number":3253,"owner":3147,"repository":3254,"state":3245,"title":3255,"updated_at":3256,"url":3257,"score":3258},"- [ ] 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,["Reactive",3260],{},["Set"],["ShallowReactive",3263],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fzed_cOL1510M5H4qYZBkrEnGSJDJja2eOtYcqlp3G98":-1},"/nuxt/ui/4092"]