\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```",[3171,3174,3177],{"name":3172,"color":3173},"bug","d73a4a",{"name":3175,"color":3176},"v3","49DCB8",{"name":3178,"color":3179},"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.7055846,{"description":3189,"labels":3190,"number":3195,"owner":3181,"repository":3182,"state":3183,"title":3196,"updated_at":3197,"url":3198,"score":3199},"### Package\n\nv3.x\n\n### Description\n\nIs it possible to add support for customizing active item styles directly through the ui prop in `UNavigationMenu`?\n\nRight now, the ui prop does not seem to handle active states. The only way to style active items is through global configuration in app.config.\n\nIt would be very helpful if ui could accept something like:\n\n```\n\u003CUNavigationMenu\n :collapsed=\"collapsed\"\n :items=\"links[0]\"\n orientation=\"vertical\"\n :ui=\"{\n list: 'flex flex-col gap-1',\n link: {\n base: 'p-2 text-xs rounded-lg transition',\n active: 'bg-primary text-white', // before:bg-primary\n }\n }\"\n tooltip\n popover\n/>\n```",[3191,3194],{"name":3192,"color":3193},"question","d876e3",{"name":3175,"color":3176},4849,"Can `UNavigationMenu` support active styles via the ui prop?","2025-09-18T14:23:37Z","https://github.com/nuxt/ui/issues/4849",0.7222738,{"description":3201,"labels":3202,"number":3206,"owner":3181,"repository":3182,"state":3183,"title":3207,"updated_at":3208,"url":3209,"score":3210},"### Environment\n\n- Operating System: Linux\n- Node Version: v20.19.1\n- Nuxt Version: -\n- CLI Version: 3.28.0\n- Nitro Version: -\n- Package Manager: pnpm@8.15.6\n- Builder: -\n- User Config: -\n- Runtime Modules: -\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nVue\n\n### Package\n\nv3.x\n\n### Version\n\nv3.3.4\n\n### Reproduction\n\nhttps://stackblitz.com/edit/vitejs-vite-9khbefry?file=src/App.vue (please open in blink-based browsers, something in the reproduction webcontainer really does not want to run in firefox)\n```vue\n\u003Ctemplate>\n \u003CUApp>\n \u003CUNavigationMenu\n :items=\"[\n {\n label: 'Nuxt UI',\n href: 'https://ui.nuxt.com',\n target: '_self',\n },\n ]\"\n />\n \u003C/UApp>\n\u003C/template>\n```\n\n### Description\n\n`NavigationMenu` is passed an item with a set `href` and `target` set to `_self`. Rendered `\u003Ca>` ignores passed `target` and sets it to `_blank`:\n\n\u003Cimg width=\"578\" height=\"320\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/e0dea426-2ed6-4dac-b1dd-f805792348af\" />\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3203,3204,3205],{"name":3172,"color":3173},{"name":3175,"color":3176},{"name":3178,"color":3179},5012,"`NavigationMenu`: `NavigationMenuItem.target` seems to be ignored","2025-09-19T04:45:20Z","https://github.com/nuxt/ui/issues/5012",0.72756594,{"description":3212,"labels":3213,"number":3219,"owner":3181,"repository":3182,"state":3183,"title":3220,"updated_at":3221,"url":3222,"score":3223},"### Description\n\nFor [SelectMenu](https://ui.nuxt.com/components/select-menu) seems to be no option to customize the label of the selected item, e.g. use multiple values to compose the label. Currently only one item value can be selected by prop `labelKey`, but it is not possible to use multiple values OR to even add custom html-code.\n\n**Example:**\n\n```ts\nconst items = [\n {\n id: 1,\n firstName: 'Max',\n lastName: 'Mustermann',\n },\n ...\n]\n```\n\nThe items to select can be fully customized, even with custom html code:\n\n```vue\n\u003Ctemplate #item-label=\"{ item }\">\n {{ item.firstName }} \u003Cspan class=\"text-highlighted\">{{ item.lastName}}\u003C/span>\n \u003Cdiv class=\"text-xs text-muted\">#{{ item.customerId }}\u003C/div>\n\u003C/template>\n```\n\nBut when an item is selected, the selected item can only be one value:\n\n```vue\n\u003CUSelectMenu label-key=\"lastName\" />\n```\n\n**Possible solutions:**\n\n1. Make a new label prop that accepts a function, so values can be compound:\n\n```ts\n\u003CUSelectMenu :label=\"(item) => item.firstName + ' ' + item.lastName\"\n```\n\n2. Optionally make a slot to customize the labels: \n```vue\n\u003CUSelectMenu>\n \u003Ctemplate #label=\"{ item }\">\n {{ item.firstName }} \u003Cspan class=\"text-highlighted\">{{ item.lastName}}\u003C/span>\n \u003Cspan class=\"text-xs text-muted\">#{{ item.customerId }}\u003C/span>\n \u003C/template>\n\u003C/USelectMenu>\n```\n\nP.S. the prop `labelKey` is not documented https://ui.nuxt.com/components/select-menu#props\n",[3214,3217,3218],{"name":3215,"color":3216},"enhancement","a2eeef",{"name":3175,"color":3176},{"name":3178,"color":3179},4581,"SelectMenu: Compound label","2025-07-23T16:38:06Z","https://github.com/nuxt/ui/issues/4581",0.7281391,{"description":3225,"labels":3226,"number":3230,"owner":3181,"repository":3182,"state":3183,"title":3231,"updated_at":3232,"url":3233,"score":3234},"### Package\n\nv3.x\n\n### Description\n\nCurrently, the NavigationMenu works very well, but when developing apps with tools like Capacitor.js, it’s very common to have bottom navigation similar to a native mobile application.\n\nSuggested Improvement:\nWhen collapsed is set to true and orientation is horizontal, add an option to display the label underneath the icon in a smaller size. It could even be wrapped in a chip if needed, so that notification styles can be added.\n\n\n\n\n\n### Additional context\n\n_No response_",[3227,3228,3229],{"name":3215,"color":3216},{"name":3175,"color":3176},{"name":3178,"color":3179},5092,"Enhance NavigationMenu for PWA/mobile-like layouts","2025-09-29T03:36:15Z","https://github.com/nuxt/ui/issues/5092",0.7332551,{"description":3236,"labels":3237,"number":3241,"owner":3181,"repository":3181,"state":3183,"title":3242,"updated_at":3243,"url":3244,"score":3245},"### 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```",[3238],{"name":3239,"color":3240},"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.73513216,{"description":3247,"labels":3248,"number":3254,"owner":3181,"repository":3182,"state":3255,"title":3256,"updated_at":3257,"url":3258,"score":3259},"### 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```",[3249,3250,3251],{"name":3172,"color":3173},{"name":3175,"color":3176},{"name":3252,"color":3253},"nuxt/ui-pro","00dc82",4177,"closed","UNavigationMenu item children not visible when wrapped in UDashboardToolbar","2025-05-23T12:23:17Z","https://github.com/nuxt/ui/issues/4177",0.6857293,{"description":3261,"labels":3262,"number":3265,"owner":3181,"repository":3182,"state":3255,"title":3266,"updated_at":3267,"url":3268,"score":3269},"### Description\n\nI'm trying to apply styling to specific elements, this is my current code for initializing my NavigationMenu items:\n```js\nconst items = ref\u003CNavigationMenuItem[]>([\n [\n {\n label: \"Something\",\n icon: \"\",\n to: \"/\"\n }\n ],\n [\n {\n icon: \"i-simple-icons-discord\",\n to: \"https://discord.gg/....\"\n }\n ]\n ])\n```\n\nI am trying to apply styling using tailwind like you would via `:ui=\"\"` on the `UNavigationMenu` element but in this case I want to change `linkLeadingIcon` only for the discord element, and replace `list` entirely for the `Something` element. I've been scouring the docs and such and I haven't been able to really find a way to do this. As far as I can tell I can't do styling based on label/icon/etc using compound variants.\n\nI'm fairly new to Nuxt UI so might be missing a obvious solution, thanks!",[3263,3264],{"name":3192,"color":3193},{"name":3175,"color":3176},3683,"NavigationMenu styling for specific items","2025-04-18T18:47:43Z","https://github.com/nuxt/ui/issues/3683",0.7009508,{"description":3271,"labels":3272,"number":3275,"owner":3181,"repository":3182,"state":3255,"title":3276,"updated_at":3277,"url":3278,"score":3279},"### 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```",[3273,3274],{"name":3172,"color":3173},{"name":3175,"color":3176},3268,"`UNavigationMenu` dropdown has wrong relative parent","2025-05-23T13:02:31Z","https://github.com/nuxt/ui/issues/3268",0.70448774,{"description":3281,"labels":3282,"number":3287,"owner":3181,"repository":3182,"state":3255,"title":3288,"updated_at":3289,"url":3290,"score":3291},"### Environment\n\n\n```\n\"@nuxt/ui\": \"^3.1.3\",\n\"@nuxt/ui-pro\": \"^3.1.3\",\n\"nuxt\": \"^3.17.5\",\n```\n\n\n```\nui: {\n prefix: 'Custom',\n},\n```\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.17.5\n\n### Reproduction\n\nIf I simply switch out the `CustomHeader` to a basic `header` element and remove the `template` tags the nested CustomNavigationMenu works and I'm not getting unable to resolve component warnings.\n\n```\n\u003Cscript setup lang=\"ts\">\nimport type { NavigationMenuItem } from '@nuxt/ui'\n\ndefineProps\u003C{\n links: NavigationMenuItem[]\n}>()\n\u003C/script>\n\n\u003Ctemplate>\n \u003CCustomHeader>\n \u003Ctemplate #left>\n \u003CClientOnly>\n \u003CNuxtLink to=\"/\">\n \u003CBaseLogo />\n \u003C/NuxtLink>\n \u003C/ClientOnly>\n \u003C/template>\n\n \u003CCustomNavigationMenu :items=\"links\" variant=\"link\" />\n\n \u003Ctemplate #right>\n \u003CThemePicker />\n \u003C/template>\n\n \u003Ctemplate #body>\n \u003CCustomNavigationMenu\n orientation=\"vertical\"\n :items=\"links\"\n />\n \u003C/template>\n \u003C/CustomHeader>\n\u003C/template>\n```\n\nerrors:\n[Vue warn]: Failed to resolve component: UButton\nIf this is a native custom element, make sure to exclude it from component resolution via ...\n[Vue warn]: Failed to resolve component: UContainer\nIf this is a native custom element, make sure to exclude it from component resolution via ...\n[Vue warn]: Failed to resolve component: ULink\nIf this is a native custom element, make sure to exclude it from component resolution via ..\n\n### Description\n\nIf i'm setting a custom prefix in the `ui: {}` config object for the components the UHeader component is unable to resolve its nested components.\n\n### Additional context\n\nI think i've seen issues like this previously also posted, and maybe its some import that is missing.\n\n### Logs\n\n```shell-script\n\n```",[3283,3284,3285,3286],{"name":3172,"color":3173},{"name":3175,"color":3176},{"name":3252,"color":3253},{"name":3178,"color":3179},4371,"custom prefix not working when set with UHeader","2025-06-18T09:09:47Z","https://github.com/nuxt/ui/issues/4371",0.7062962,["Reactive",3293],{},["Set"],["ShallowReactive",3296],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fA3-sSUYCChAVW9Az3Qpfie-dhid3ICi7bMkTYzZ4vno":-1},"/nuxt/ui/5141"]