\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```",[3137,3140,3143],{"name":3138,"color":3139},"bug","d73a4a",{"name":3141,"color":3142},"v3","49DCB8",{"name":3144,"color":3145},"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.74229383,{"description":3155,"labels":3156,"number":3160,"owner":3147,"repository":3148,"state":3149,"title":3161,"updated_at":3162,"url":3163,"score":3164},"### 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 inactive: 'text-gray-700 hover:bg-gray-100'\n }\n }\"\n tooltip\n popover\n/>\n```",[3157],{"name":3158,"color":3159},"question","d876e3",4849,"Can `UNavigationMenu` support active styles via the ui prop?","2025-08-30T10:29:01Z","https://github.com/nuxt/ui/issues/4849",0.7431406,{"description":3166,"labels":3167,"number":3170,"owner":3147,"repository":3148,"state":3149,"title":3171,"updated_at":3172,"url":3173,"score":3174},"### Description\n\nWhat can we do if we have to use custom content using slot in vertical orientation NavigationMenu?\n\nExample code:\n```\n\u003Ctemplate>\n \u003CUNavigationMenu\n :items=\"items\"\n orientation=\"vertical\"\n class=\"w-full justify-center\"\n >\n \u003Ctemplate #docs-content>\n \u003CDocs />\n \u003C/template>\n \u003Ctemplate #components-content>\n \u003CComponents />\n \u003C/template>\n \u003C/UNavigationMenu>\n\u003C/template>\n\n\u003Cscript setup lang=\"ts\">\nimport type { NavigationMenuItem } from '@nuxt/ui'\n\nimport Docs from '@/components/common/header/Docs.vue'\nimport Components from '@/components/common/header/Components.vue'\n\nconst items = [\n {\n label: 'Docs',\n icon: 'i-lucide-book-open',\n slot: 'docs' as const,\n },\n {\n label: 'Components',\n icon: 'i-lucide-box',\n slot: 'components' as const,\n },\n {\n label: 'GitHub',\n icon: 'i-simple-icons-github'\n }\n] satisfies NavigationMenuItem[]\n\u003C/script>\n```\n",[3168,3169],{"name":3158,"color":3159},{"name":3141,"color":3142},4616,"custom content slot in vertical orientation NavigationMenu","2025-07-28T05:42:41Z","https://github.com/nuxt/ui/issues/4616",0.7463001,{"description":3176,"labels":3177,"number":3181,"owner":3147,"repository":3148,"state":3149,"title":3182,"updated_at":3183,"url":3184,"score":3185},"### Environment\n\n- Operating System: Windows_NT\n- Node Version: v22.12.0\n- Nuxt Version: 3.17.4\n- CLI Version: 3.25.1\n- Nitro Version: 2.11.12\n- Package Manager: npm@10.9.0\n- User Config: compatibilityDate, devtools, ssr, future, app, css, modules, build, vite, eslint, i18n, runtimeConfig, experimental, imports\n- Runtime Modules: @nuxt/eslint@1.4.1, @nuxt/test-utils@3.19.1, @nuxt/ui@3.2.0, @nuxtjs/i18n@9.5.5\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.2.0\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/nuxt-ui3-n3sxks\n\n### Description\n\nThe UNavigationMenu component doesn't have built-in support for generating localized routes when using @nuxtjs/i18n. When using locale prefixes (e.g., /en/dashboard, /ar/dashboard), the navigation items don't automatically adapt to the current locale.\n\n### Expected behavior:\nThe component should automatically handle locale prefixes when @nuxtjs/i18n is configured, similar to how \u003CNuxtLink> works with localePath().\n\n### Proposed solution:\nAuto-detect @nuxtjs/i18n configuration\nApply localePath() internally to to props\nAdd optional localized prop for explicit control\nMaintain backward compatibility\n\nThis would eliminate boilerplate code and improve DX for internationalized applications using Nuxt UI navigation components.\n\n\n### Additional context\n\n**Current Workaround Required:**\n```vue\n\u003Cscript setup>\nconst { locale } = useI18n()\n\n// Manual helper function needed\nconst getLocalizedRoute = (path) => {\n if (locale.value === 'ar') {\n return `/example/ar${path}`\n }\n return `/example${path}`\n}\n\nconst sidebarItems = computed(() => [\n [{\n label: 'Dashboard',\n icon: 'i-lucide-home',\n to: getLocalizedRoute('/dashboard/'), // Manual localization\n }]\n])\n\u003C/script>\n```\n\n### Logs\n\n```shell-script\n\n```",[3178,3179,3180],{"name":3138,"color":3139},{"name":3141,"color":3142},{"name":3144,"color":3145},4465,"UNavigationMenu lacks built-in support for localized routes (i18n)","2025-07-06T14:40:52Z","https://github.com/nuxt/ui/issues/4465",0.7547571,{"description":3187,"labels":3188,"number":3191,"owner":3147,"repository":3148,"state":3149,"title":3192,"updated_at":3193,"url":3194,"score":3195},"### Description\n\nHi 👋 \n\nthe DropdownMenu component comes with some keyboard interactions, which is great. But I would like to control which keyboard interactions are enabled. I know this is handled by Reka, but I still wonder if it can be implemented/configured through the UDropdownMenu. Especially the Typeahead Search?\n\nExample:\n\nWe have an UInput in the #content-top slot and the results in the #item slot, when I type \"a\", then get results, then press \"a\" again the focus switches to the first result with the letter \"a\". Right now its possible to intercept the event on keydown for example, but I would rather just deactivate this feature.\n\n```\n\u003CUDropdownMenu :items mode=\"click\">\n \u003CUButton>Trigger\u003C/UButton>\n\n \u003Ctemplate #content-top>\n \u003CUInput v-model=\"search\" placeholder=\"Search\" />\n \u003C/template>\n\n \u003Ctemplate #item=\"{ item }\">\n \u003Cspan v-text=\"item.label\" />\n \u003C/template>\n\u003C/UDropdownMenu>\n```",[3189,3190],{"name":3158,"color":3159},{"name":3141,"color":3142},4636,"DropdownMenu keyboard interaction handling","2025-07-31T06:44:47Z","https://github.com/nuxt/ui/issues/4636",0.76248163,{"description":3197,"labels":3198,"number":3202,"owner":3147,"repository":3148,"state":3149,"title":3203,"updated_at":3204,"url":3205,"score":3206},"### Environment\n\n- Operating System: Windows_NT\n- Node Version: v22.13.0\n- Nuxt Version: 3.17.7\n- CLI Version: 3.25.1\n- Nitro Version: 2.11.13\n- Package Manager: npm@11.5.1\n- Builder: -\n- User Config: devServer, runtimeConfig, experimental, devtools, ssr, components, modules, imports, shiki, css, ui, icon, compatibilityDate\n- Runtime Modules: @pinia/nuxt@0.11.2, @nuxt/ui@3.2.0, @nuxt/image@1.10.0, @vueuse/nuxt@13.5.0, nuxt-shiki@0.3.1, @nuxt/icon@1.15.0, @nuxtjs/color-mode@3.5.2, @compodium/nuxt@0.1.0-beta.11\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.17.7\n\n### Reproduction\n\nhttps://ui.nuxt.com/components/dropdown-menu (call any menu DropdownMenu from example)\nhttps://ui.nuxt.com/components/context-menu (call any menu ContexMenu from example)\n\n### Description\n\nWhen I call any UDropdownMenu or UContextMenu in my project, it causes the elements in the entire page template to shift and also removes the scrollbar from the page, which also causes the content to shift. This can also be checked on the documentation page. I made a screen recording.\n\nHere you can see how the icon in the left menu moves to select UI Pro, as well as scrolling this menu. And the main page scroll disappears.\n\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3199,3200,3201],{"name":3138,"color":3139},{"name":3141,"color":3142},{"name":3144,"color":3145},4619,"UDropdownMenu, UContextMenu move elements on the page and remove page scroll","2025-07-28T15:39:43Z","https://github.com/nuxt/ui/issues/4619",0.76443917,{"description":3208,"labels":3209,"number":1677,"owner":3147,"repository":3216,"state":3217,"title":3218,"updated_at":3219,"url":3220,"score":3221},"",[3210,3213],{"name":3211,"color":3212},"enhancement","a2eeef",{"name":3214,"color":3215},"provider","1161A4","fonts","closed","adobe fonts provider","2024-03-12T23:29:19Z","https://github.com/nuxt/fonts/issues/11",0.6942035,{"description":3223,"labels":3224,"number":3227,"owner":3147,"repository":3148,"state":3217,"title":3228,"updated_at":3229,"url":3230,"score":3231},"### Description\n\nIn the vertical pill variant I want the background of the active item to be white. It's not clear how to achieve this through the `ui` prop\n\n\n\n```\n\u003CUNavigationMenu\n orientation=\"vertical\"\n variant=\"pill\"\n :items=\"items\"\n\n :ui=\"{\n variants: {\n compoundVariants: [\n {\n variant: 'pill',\n active: true,\n highlight: false,\n class: {\n link: 'before:bg-white' // tried this but it's not working\n }\n }\n ]\n }\n }\"\n/>\n```",[3225,3226],{"name":3158,"color":3159},{"name":3141,"color":3142},3517,"How To Style NavigationMenu items","2025-05-10T11:36:22Z","https://github.com/nuxt/ui/issues/3517",0.71532613,{"description":3233,"labels":3234,"number":3235,"owner":3147,"repository":3216,"state":3217,"title":3236,"updated_at":3237,"url":3238,"score":3239},"#### Output of `npx nuxi info`:\r\n\r\n```\r\nNuxt project info: \r\n\r\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v20.14.0\r\n- Nuxt Version: 3.11.2\r\n- CLI Version: 3.11.1\r\n- Nitro Version: 2.9.6\r\n- Package Manager: pnpm@9.1.4\r\n- Builder: -\r\n- User Config: devtools, modules, fonts\r\n- Runtime Modules: @nuxt/fonts@0.7.0\r\n- Build Modules: -\r\n------------------------------\r\n```\r\n\r\n#### My custom provider in `~/providers/ComputerModernFontProvider.ts`:\r\n\r\n```ts\r\nimport { defineFontProvider } from '@nuxt/fonts/utils'\r\n\r\nexport default defineFontProvider({\r\n async resolveFontFaces (fontFamily, defaults) {\r\n if (fontFamily === 'Computer Modern') {\r\n return { \r\n fonts: [\r\n { \r\n weight: 400,\r\n style: 'normal',\r\n src: { url: '\u003Clink-to-cdn>', format: 'otf' },\r\n },\r\n { \r\n weight: 400,\r\n style: 'italic',\r\n src: { url: '\u003Clink-to-cdn>', format: 'otf' },\r\n },\r\n { \r\n weight: 700,\r\n style: 'normal',\r\n src: { url: '\u003Clink-to-cdn>', format: 'otf' },\r\n },\r\n ]\r\n }\r\n }\r\n }\r\n})\r\n```\r\n\r\n#### Picture of the Error:\r\n\r\n\r\n\r\n#### Steps & Contribution\r\n\r\nI find this super weird since `./utils` **is** already defined in the `package.json` [here](https://github.com/nuxt/fonts/blob/8a00c3b0771bbcf0cd34c9e2a854eb77b501d8ff/package.json#L17).\r\nIf someone could give me some pointers towards the solution, I'd happily create a PR.\r\nThank you in advance.\r\n",[],170,"Bug when importing `defineFontProvider`: Package subpath './utils' is not defined by \"exports\"","2024-09-23T12:06:54Z","https://github.com/nuxt/fonts/issues/170",0.72929907,{"description":3241,"labels":3242,"number":352,"owner":3147,"repository":3243,"state":3217,"title":3244,"updated_at":3245,"url":3246,"score":3247},"Hey, I am using nuxt with custom base-path and my custom collection isn't loading on deployed app. Is there a way to change base path for the icons?",[],"icon","Add support for customized base path","2024-05-25T10:23:25Z","https://github.com/nuxt/icon/issues/163",0.72964483,["Reactive",3249],{},["Set"],["ShallowReactive",3252],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fxz1vbJlEMQdrAZngqUSnPiYmoUY93TMuZ4ePTtpZDmU":-1},"/nuxt/icon/138"]