\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```",[2924,2925,2926],{"name":2905,"color":2906},{"name":2908,"color":2909},{"name":2911,"color":2912},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.72112155,{"description":2933,"labels":2934,"number":2937,"owner":2914,"repository":2915,"state":2938,"title":2939,"updated_at":2940,"url":2941,"score":2942},"### Environment\n\n- Operating System: Linux\n- Node Version: v22.4.0\n- Nuxt Version: 3.14.1592\n- CLI Version: 3.15.0\n- Nitro Version: 2.10.4\n- Package Manager: pnpm@9.14.2\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/ui@3.0.0-alpha.9, nuxt-auth-sanctum@0.5.2, @vueuse/nuxt@11.3.0\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.14.1592\n\n### Reproduction\n\n```vue\n\u003Cscript setup lang=\"ts\"\nconst placeItems = ref([{ id: 1, name: 'Place 1' }, { id: 2, name: 'Place 2' }])\n\u003C/script>\n\n\u003Ctemplate>\n\u003CUInputMenu :items=\"placeItems\"\n value-key=\"id\"\n label-key=\"name\"\n class=\"w-full mb-4\"\n multiple />\n\n\u003CUInputMenu :items=\"placeItems\"\n value-key=\"id\"\n label-key=\"name\"\n class=\"w-full\"/>\n\u003C/template>\n```\n\n### Description\nIn my opinion, the border, when focusing, should have the same color as when the parameter is absent `multiple`.\nWith white border looks bad :D\nhttps://skr.sh/vSqjqLYGgHO",[2935,2936],{"name":2905,"color":2906},{"name":2908,"color":2909},2742,"closed","UInputMenu has wrong border when focused in multiple mode","2024-12-05T13:48:56Z","https://github.com/nuxt/ui/issues/2742",0.66797525,{"description":2944,"labels":2945,"number":2949,"owner":2914,"repository":2915,"state":2938,"title":2950,"updated_at":2951,"url":2952,"score":2953},"### Environment\n\n------------------------------\n- Operating System: Darwin\n- Node Version: v22.13.1\n- Nuxt Version: 3.17.3\n- CLI Version: 3.25.1\n- Nitro Version: 2.11.12\n- Package Manager: npm@10.9.2\n- Builder: -\n- User Config: hooks, app, runtimeConfig, supabase, routeRules, sitemap, site, compatibilityDate, devtools, modules, css, ui\n- Runtime Modules: @nuxt/ui@3.1.2, @pinia/nuxt@0.11.0, @nuxtjs/supabase@1.5.1, @nuxtjs/seo@3.0.3, @storyblok/nuxt@6.2.4\n- Build Modules: -\n------------------------------\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.1.2\n\n### Reproduction\n\nchange the border color(I assume should be this variable: --ui-border) in your project to red or blue and check if this color is applied when using only the classes: `border` or `border-b` without specifying the color.\n\n### Description\n\nI want to set the default border color, by default is very dark.\n\nI found that `--ui-border` variable is not used in the border style, maybe I could be wrong.\n\n\u003Cimg width=\"374\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/7f25806c-f5ea-43a1-a2a3-095d71448d43\" />\n\nthis is how the borders are styled in my case, no `--ui-border`\n\n\u003Cimg width=\"542\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/6bb3138e-36e5-46cb-9930-92b608811fe0\" />\n\n\u003Cimg width=\"515\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/16ad3bc6-a8a9-4391-a0c5-542ff3f58121\" />\n\nplease help, \n\nthank you\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2946,2947,2948],{"name":2905,"color":2906},{"name":2908,"color":2909},{"name":2911,"color":2912},4218,"Can't set the default border color","2025-05-26T08:34:37Z","https://github.com/nuxt/ui/issues/4218",0.6842973,{"description":2955,"labels":2956,"number":2962,"owner":2914,"repository":2915,"state":2938,"title":2963,"updated_at":2964,"url":2965,"score":2966},"### 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```",[2957,2958,2959],{"name":2905,"color":2906},{"name":2908,"color":2909},{"name":2960,"color":2961},"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.68545437,{"description":2968,"labels":2969,"number":2972,"owner":2914,"repository":2915,"state":2938,"title":2973,"updated_at":2974,"url":2975,"score":2976},"### 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```",[2970,2971],{"name":2905,"color":2906},{"name":2908,"color":2909},3268,"`UNavigationMenu` dropdown has wrong relative parent","2025-05-23T13:02:31Z","https://github.com/nuxt/ui/issues/3268",0.68683386,{"description":2978,"labels":2979,"number":2982,"owner":2914,"repository":2915,"state":2938,"title":2983,"updated_at":2984,"url":2985,"score":2986},"### Environment\n\nOperating System: Windows 11\nNode Version: v22.14.0\nNuxt Version: 3.15.4\nCLI Version: 3.13.2\nNitro Version: 2.10.4\nPackage Manager: npm@11.1.0\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.\n\n### Description\n\nHi\nWhen we use the arrow in the DropdownMenu component, a border is added to the last item. Apparently, this is because the arrow element is added at the end of the items groups in this component.\n\n\n\n\n\nI hope I was able to tell you what I meant. It's nothing special, but it would be great if it could be fixed. 🙄\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2980,2981],{"name":2905,"color":2906},{"name":2908,"color":2909},3315,"arrow causes appear border in the last item of DropdownMenu","2025-05-23T15:41:53Z","https://github.com/nuxt/ui/issues/3315",0.69286555,{"description":2988,"labels":2989,"number":2993,"owner":2914,"repository":2915,"state":2938,"title":2994,"updated_at":2995,"url":2996,"score":2997},"### Environment\n\n```\n- Operating System: Darwin\n- Node Version: v22.14.0\n- Nuxt Version: 3.16.2\n- CLI Version: 3.24.1\n- Nitro Version: 2.11.9\n- Package Manager: bun@1.2.9\n- Builder: -\n- User Config: ssr, imports, devtools, experimental, future, compatibilityDate, alias, runtimeConfig, devServer, app, css, modules, build, hooks, dayjs, ui, typescript\n- Runtime Modules: @nuxt/eslint@1.3.0, @vueuse/nuxt@13.1.0, @nuxt/test-utils/module@3.17.2, dayjs-nuxt@2.1.11, nuxt-svgo@4.0.17, @nuxt/ui-pro@3.1.0, @pinia/nuxt@0.11.0, @pinia/colada-nuxt@0.1.1, @nuxt/image@1.10.0\n- Build Modules: -\n```\n\n\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.1.0\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/empty-fast-5xtcmy?workspaceId=ws_SD2P6X4ufyWkm2P3aqoQA6\n\n### Description\n\nbetween version 3.0.2 and 3.1.0 the content container for the menu items is no longer filling the width.\n\n### Additional context\n\n__no response__\n\n### Logs\n\n```shell-script\n\n```",[2990,2991,2992],{"name":2905,"color":2906},{"name":2908,"color":2909},{"name":2911,"color":2912},3987,"[NavigationMenu] Regression - Update","2025-05-02T09:52:45Z","https://github.com/nuxt/ui/issues/3987",0.69918096,{"description":2999,"labels":3000,"number":3006,"owner":2914,"repository":2915,"state":2938,"title":3007,"updated_at":3008,"url":3009,"score":3010},"### Environment\n\n```\n System:\n OS: macOS 15.5\n CPU: (14) arm64 Apple M3 Max\n Memory: 555.83 MB / 36.00 GB\n Shell: 5.9 - /bin/zsh\n Binaries:\n Node: 23.11.0 - /opt/homebrew/bin/node\n Yarn: 1.22.22 - /opt/homebrew/bin/yarn\n npm: 10.9.2 - /opt/homebrew/bin/npm\n pnpm: 9.12.3 - /opt/homebrew/bin/pnpm\n Watchman: 2025.04.28.00 - /opt/homebrew/bin/watchman\n npmPackages:\n nuxt: ^3.17.3 => 3.17.4 \n```\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.17.4\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/nuxt-ui3-n3sxks\n\n### Description\n\nWhen using the UNavigationMenu component from Nuxt UI 3 in a fresh Nuxt 3 app, the following warning appears in the browser console:\n\n```shell-script\n> [Vue warn] toRefs() expects a reactive object but received a plain one.\n```\n\nThis occurs even when rendering the component barebones:\n\n**pages/index.vue:**\n\n```vue\n\u003Cscript setup lang=\"ts\">\nimport type { NavigationMenuItem } from '@nuxt/ui'\n\nconst items = ref\u003CNavigationMenuItem[]>([\n {\n label: 'Guide',\n icon: 'i-lucide-book-open',\n to: '/getting-started',\n children: [\n {\n label: 'Introduction',\n description: 'Fully styled and customizable components for Nuxt.',\n icon: 'i-lucide-house'\n },\n {\n label: 'Installation',\n description: 'Learn how to install and configure Nuxt UI in your application.',\n icon: 'i-lucide-cloud-download'\n },\n {\n label: 'Icons',\n icon: 'i-lucide-smile',\n description: 'You have nothing to do, @nuxt/icon will handle it automatically.'\n },\n {\n label: 'Colors',\n icon: 'i-lucide-swatch-book',\n description: 'Choose a primary and a neutral color from your Tailwind CSS theme.'\n },\n {\n label: 'Theme',\n icon: 'i-lucide-cog',\n description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'\n }\n ]\n },\n {\n label: 'Composables',\n icon: 'i-lucide-database',\n to: '/composables',\n children: [\n {\n label: 'defineShortcuts',\n icon: 'i-lucide-file-text',\n description: 'Define shortcuts for your application.',\n to: '/composables/define-shortcuts'\n },\n {\n label: 'useOverlay',\n icon: 'i-lucide-file-text',\n description: 'Display a modal/slideover within your application.',\n to: '/composables/use-overlay'\n },\n {\n label: 'useToast',\n icon: 'i-lucide-file-text',\n description: 'Display a toast within your application.',\n to: '/composables/use-toast'\n }\n ]\n },\n {\n label: 'Components',\n icon: 'i-lucide-box',\n to: '/components',\n active: true,\n children: [\n {\n label: 'Link',\n icon: 'i-lucide-file-text',\n description: 'Use NuxtLink with superpowers.',\n to: '/components/link'\n },\n {\n label: 'Modal',\n icon: 'i-lucide-file-text',\n description: 'Display a modal within your application.',\n to: '/components/modal'\n },\n {\n label: 'NavigationMenu',\n icon: 'i-lucide-file-text',\n description: 'Display a list of links.',\n to: '/components/navigation-menu'\n },\n {\n label: 'Pagination',\n icon: 'i-lucide-file-text',\n description: 'Display a list of pages.',\n to: '/components/pagination'\n },\n {\n label: 'Popover',\n icon: 'i-lucide-file-text',\n description: 'Display a non-modal dialog that floats around a trigger element.',\n to: '/components/popover'\n },\n {\n label: 'Progress',\n icon: 'i-lucide-file-text',\n description: 'Show a horizontal bar to indicate task progression.',\n to: '/components/progress'\n }\n ]\n },\n {\n label: 'GitHub',\n icon: 'i-simple-icons-github',\n badge: '3.8k',\n to: 'https://github.com/nuxt/ui',\n target: '_blank'\n },\n {\n label: 'Help',\n icon: 'i-lucide-circle-help',\n disabled: true\n }\n])\n\u003C/script>\n\u003Ctemplate>\n \u003CUNavigationMenu :items=\"items\" class=\"w-full justify-center\" />\n\u003C/template>\n\n```\n\n**Minimal Reproduction**\nRepro created using Nuxt 3 + Nuxt UI 3 starter structure.\n\npackage.json:\n```json\n{\n \"name\": \"nuxt-app\",\n \"private\": true,\n \"type\": \"module\",\n \"scripts\": {\n \"build\": \"nuxt build\",\n \"dev\": \"nuxt dev\",\n \"generate\": \"nuxt generate\",\n \"preview\": \"nuxt preview\",\n \"postinstall\": \"nuxt prepare\",\n \"lint\": \"eslint .\",\n \"lint:fix\": \"eslint --fix .\"\n },\n \"dependencies\": {\n \"@iconify-json/lucide\": \"^1.2.44\",\n \"@iconify-json/simple-icons\": \"^1.2.35\",\n \"@nuxt/ui\": \"^3.1.1\",\n \"nuxt\": \"^3.17.3\"\n },\n \"devDependencies\": {\n \"@nuxt/eslint\": \"^1.4.1\",\n \"eslint\": \"^9.27.0\",\n \"typescript\": \"^5.8.3\"\n }\n}\n```\n\nNotes\n\t•\tReproduces consistently in local dev.\n\t•\tDoes not reproduce on Codesandbox with the Nuxt UI 3 starter (possibly due to different runtime setup).\n\t•\tNo functional issues observed so far, but the warning pollutes the console.\n\t•\tThis warning has only recently started appearing in the console logs, despite no code changes to this component on our end — possibly introduced in a recent dependency update.\n",[3001,3002,3003],{"name":2905,"color":2906},{"name":2908,"color":2909},{"name":3004,"color":3005},"reka-ui","56d799",4257,"[Vue warn] toRefs() expects a reactive object but received a plain one - \u003CUNavigationMenu />","2025-06-10T14:16:02Z","https://github.com/nuxt/ui/issues/4257",0.70241356,{"description":3012,"labels":3013,"number":1461,"owner":2914,"repository":3020,"state":2938,"title":3021,"updated_at":3022,"url":3023,"score":3024},"",[3014,3017],{"name":3015,"color":3016},"enhancement","a2eeef",{"name":3018,"color":3019},"provider","1161A4","fonts","adobe fonts provider","2024-03-12T23:29:19Z","https://github.com/nuxt/fonts/issues/11",0.70569307,["Reactive",3026],{},["Set"],["ShallowReactive",3029],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fC3ZUHSFngBH2bvCcnuBhYmN0VibcmLH0GjRgG6hnr1E":-1},"/nuxt/ui/2766"]