\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```",[2902,2905,2908],{"name":2903,"color":2904},"bug","d73a4a",{"name":2906,"color":2907},"v3","49DCB8",{"name":2909,"color":2910},"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":2920,"labels":2921,"number":2926,"owner":2912,"repository":2913,"state":2914,"title":2927,"updated_at":2928,"url":2929,"score":2930},"### Description\n\n## No Clear Documentation for Targeting Active Styles in `NavigationMenu` Component\n\n### Description\n\nI'm trying to apply custom styles to the active state of a menu item in the `NavigationMenu` component, but there doesn't seem to be any clear documentation on how to do this.\n\nThe [theming docs](https://ui.nuxt.com/getting-started/theme#props) mention using the `:ui` attribute to target internal parts of a component, and the [theme structure for `NavigationMenu`](https://ui.nuxt.com/components/navigation-menu#theme) shows a large theme object. However, attempting to follow that structure often results in unexpected behavior—like rendering `[object Object]`, which suggests that it doesn't expect an object or the nested configuration isn’t being parsed correctly.\n\nEven large language models get tripped up when referencing the documentation. Some approaches I've tried (unsuccessfully) include:\n\n```js\nlink: {\n base: 'px-3 py-2 rounded-md',\n active: 'bg-primary text-white font-medium'\n},\nvariants: {\n active: {\n true: {\n item: 'bg-primary text-white font-medium'\n }\n }\n}\n```\n\nThe only working solution so far is using data-* attributes like this:\n```js\nlink: 'text-md data-active:bg-primary data-active:text-white'\n```\nWhile this works, it’s undocumented and feels fragile—it could easily break with a future update if it’s not the intended method.\n\n### Question\nWhat is the official and supported way to apply styles based on active state for subcomponents like link in NavigationMenu?",[2922,2925],{"name":2923,"color":2924},"question","d876e3",{"name":2906,"color":2907},4279,"Targeting active menu styles","2025-06-02T10:32:24Z","https://github.com/nuxt/ui/issues/4279",0.7468664,{"description":2932,"labels":2933,"number":1662,"owner":2912,"repository":2940,"state":2941,"title":2942,"updated_at":2943,"url":2944,"score":2945},"",[2934,2937],{"name":2935,"color":2936},"enhancement","a2eeef",{"name":2938,"color":2939},"provider","1161A4","fonts","closed","adobe fonts provider","2024-03-12T23:29:19Z","https://github.com/nuxt/fonts/issues/11",0.6942035,{"description":2947,"labels":2948,"number":2951,"owner":2912,"repository":2913,"state":2941,"title":2952,"updated_at":2953,"url":2954,"score":2955},"### 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```",[2949,2950],{"name":2923,"color":2924},{"name":2906,"color":2907},3517,"How To Style NavigationMenu items","2025-05-10T11:36:22Z","https://github.com/nuxt/ui/issues/3517",0.71532613,{"description":2957,"labels":2958,"number":2959,"owner":2912,"repository":2940,"state":2941,"title":2960,"updated_at":2961,"url":2962,"score":2963},"#### 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":2965,"labels":2966,"number":352,"owner":2912,"repository":2967,"state":2941,"title":2968,"updated_at":2969,"url":2970,"score":2971},"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,{"description":2973,"labels":2974,"number":2980,"owner":2912,"repository":2913,"state":2941,"title":2981,"updated_at":2982,"url":2983,"score":2984},"### 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```",[2975,2976,2977],{"name":2903,"color":2904},{"name":2906,"color":2907},{"name":2978,"color":2979},"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.7310039,{"description":2986,"labels":2987,"number":2990,"owner":2912,"repository":2913,"state":2941,"title":2991,"updated_at":2992,"url":2993,"score":2994},"### Environment\n\n- Operating System: Darwin\n- Node Version: v20.10.0\n- Nuxt Version: 3.14.159\n- CLI Version: 3.15.0\n- Nitro Version: 2.10.4\n- Package Manager: npm@10.9.0\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/ui@3.0.0-alpha.9, nuxt-svgo@4.0.9\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.0-alpha.9\n\n### Reproduction\n\n```vue\n\u003Cscript setup lang=\"ts\">\n/* Types */\nimport type { NavigationMenuItem } from \"#ui/types\";\n\nconst items = ref\u003CNavigationMenuItem[][]>([\n [\n {\n label: \"Menu\",\n defaultOpen: true,\n children: [\n {\n label: \"Submenu\",\n badge: {\n label: \"latest\",\n color: \"secondary\",\n },\n to: \"https://www.example.com\",\n target: \"_blank\",\n },\n ],\n },\n ],\n]);\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv class=\"h-full\">\n \u003CUNavigationMenu orientation=\"vertical\" :items=\"items\" />\n \u003C/div>\n\u003C/template>\n```\n\n### Description\n\nAfter upgrading from `alpha.8` to `alpha.9`, the border radius is wrong (different from the rest of the application) when using badge in the [NavigationMenu](https://ui3.nuxt.dev/components/navigation-menu). When inspecting HTML, this is the class (related to border radius) applied to the badge: `rounded-[calc(var(--ui-radius)]`.\n\nI also tried passing the [class](https://ui3.nuxt.dev/components/badge#class-prop) to `BadgeProps` but it doesn't work:\n```vue\n```vue\n\u003Cscript setup lang=\"ts\">\n/* Types */\nimport type { NavigationMenuItem } from \"#ui/types\";\n\nconst items = ref\u003CNavigationMenuItem[][]>([\n [\n {\n label: \"Menu\",\n defaultOpen: true,\n children: [\n {\n label: \"Submenu\",\n badge: {\n label: \"latest\",\n color: \"secondary\",\n class: \"rounded-full\", // ! NOT WORKING\n },\n to: \"https://www.example.com\",\n target: \"_blank\",\n },\n ],\n },\n ],\n]);\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv class=\"h-full\">\n \u003CUNavigationMenu orientation=\"vertical\" :items=\"items\" />\n \u003C/div>\n\u003C/template>\n```\nHowever, IMO the border radius should be inherited (no need to pass `class`).\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2988,2989],{"name":2903,"color":2904},{"name":2906,"color":2907},2766,"Badge border radius is wrong (NavigationMenu)","2024-11-26T11:23:27Z","https://github.com/nuxt/ui/issues/2766",0.7394033,{"description":2996,"labels":2997,"number":3006,"owner":2912,"repository":2913,"state":2941,"title":3007,"updated_at":3008,"url":3009,"score":3010},"### Description\n\nHow can i custom content slot in NavigationMenu with orientation is vertical. It just work with orientation is horizontal\n\n\n\n",[2998,2999,3002,3003],{"name":2923,"color":2924},{"name":3000,"color":3001},"needs reproduction","CB47CF",{"name":2906,"color":2907},{"name":3004,"color":3005},"closed-by-bot","ededed",4097,"Custom content slot in NavigationMenu","2025-05-16T02:10:16Z","https://github.com/nuxt/ui/issues/4097",0.7452839,{"description":3012,"labels":3013,"number":3014,"owner":2912,"repository":2967,"state":2941,"title":3015,"updated_at":3016,"url":3017,"score":3018},"### Environment\r\n\r\n- Operating System: Linux\r\n- Node Version: v21.7.1\r\n- Nuxt Version: 3.11.1\r\n- CLI Version: 3.11.1\r\n- Nitro Version: 2.9.5\r\n- Package Manager: bun@1.1.0\r\n- Builder: -\r\n- User Config: devtools, modules\r\n- Runtime Modules: @nuxt/content@2.12.1, nuxt-icon@0.6.10\r\n- Build Modules: -\r\n\r\n### Reproduction\r\n\r\nGitHub repo here: https://github.com/kbrgmn/nuxt-content-icon-reproduction (as the browser freezes/crashes, stackblitz does not work well here)\r\n\r\nVery minimal reproduction:\r\n- a single page `[...slug].vue`:\r\n```vue\r\n\u003Ctemplate>\r\n \u003CContentDoc/>\r\n\u003C/template>`)\r\n```\r\n- 2 components\r\n\r\nthe first of which is:\r\n```vue\r\n\u003Ctemplate>\r\n \u003CIcon name=\"heroicons:information-circle\"/>\r\n\u003C/template>\r\n```\r\n\r\nthe second component is:\r\n```vue\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003Cp>Different component here\u003C/p>\r\n \u003Cdiv>\r\n \u003Cslot/>\r\n \u003C/div>\r\n \u003C/div>\r\n\u003C/template>\r\n```\r\n\r\n- 1 single simple content markdown page using the two components:\r\n```md\r\n# Issue reproduction\r\n\r\nFirst component (icon):\r\n::ComponentWithIcon\r\n::\r\n\r\n::SecondComponent\r\nWe have some more content here\r\n- nsetetur sadipscing elitr,\r\n::\r\n```\r\n\r\n### Describe the bug\r\n\r\nWhen the page is visited (in dev mode with `bun dev`), it completely freezes up (both Firefox and Chrome), \r\nwith no text being selectable, developer console not opening if it hasn't already been opened or opening blank, browser not even closing properly, and this warning is printed hundreds of times repeatedly in the console:\r\n```\r\nAvoid app logic that relies on enumerating keys on a component instance.\r\nThe keys will be empty in production mode to avoid performance overhead.\r\n```\r\n(the reproduction does not have a single \u003Cscript> tag in the whole repository)\r\n\r\nHowever, this issue does not occur when a production build is being done with `bun run build`.\r\n**When the first component (the nuxt-icon) is removed, the issue does not occur.**\r\n\r\n### Logs\r\n\r\nNo warnings / errors are outputted in the terminal where `nuxt dev` is run.\r\n",[],150,"Freezes up in Nuxt Content","2024-06-26T21:21:31Z","https://github.com/nuxt/icon/issues/150",0.74676776,["Reactive",3020],{},["Set"],["ShallowReactive",3023],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fxz1vbJlEMQdrAZngqUSnPiYmoUY93TMuZ4ePTtpZDmU":-1},"/nuxt/icon/138"]