\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```",[3196,3199,3202],{"name":3197,"color":3198},"bug","d73a4a",{"name":3200,"color":3201},"v3","49DCB8",{"name":3203,"color":3204},"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":3214,"labels":3215,"number":3220,"owner":3206,"repository":3207,"state":3208,"title":3221,"updated_at":3222,"url":3223,"score":3224},"### 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```",[3216,3219],{"name":3217,"color":3218},"question","d876e3",{"name":3200,"color":3201},4849,"Can `UNavigationMenu` support active styles via the ui prop?","2025-09-18T14:23:37Z","https://github.com/nuxt/ui/issues/4849",0.7431406,{"description":3226,"labels":3227,"number":3232,"owner":3206,"repository":3207,"state":3208,"title":3233,"updated_at":3234,"url":3235,"score":3236},"### Package\n\nv4.x\n\n### Description\n\n# UNavigationMenu ARIA Label Override\n\nYou cannot override `UNavigationMenu` with the following:\n\n```vue\n\u003CUNavigationMenu\n aria-label=\"Main site navigation\"\n :items=\"navLinks\"\n/>\n```\n\nIt will always render as:\n\n```html\n\u003Cnav aria-label=\"Main\">\n```\n\n**Issue:** If you need distinct ARIA labels (e.g., Admin, Footer, Header menus), you can’t target them individually because the component forces `aria-label=\"Main\"` on its root `\u003Cnav>`.\n\n## Workaround\n\nWrap the component in your own `\u003Cnav>` and change the rendered element of `UNavigationMenu` to a non-`nav` container using `as=\"div\"`:\n\n```vue\n\u003Cnav aria-label=\"Main site navigation\">\n \u003CUNavigationMenu\n as=\"div\"\n :items=\"navLinks\"\n />\n\u003C/nav>\n```\n\nThis outputs a single correctly labeled `\u003Cnav>` while avoiding multiple nested `\u003Cnav>` elements.\n\n## Trade‑offs\n\n- ✅ Correct, custom ARIA label on the outer `\u003Cnav>`.\n- ⚠️ Adds one extra wrapper element (your `\u003Cnav>`), since `UNavigationMenu` itself is no longer the `\u003Cnav>`.\n\n## Notes\n\nIf there’s an official prop added in a future release to override the internal `aria-label`, you could switch back to a single component without the wrapper.\n\n\n\n### Additional context\n\n_No response_",[3228,3231],{"name":3229,"color":3230},"enhancement","a2eeef",{"name":3203,"color":3204},5141,"UNavigationMenu ARIA Label Override","2025-10-04T21:41:29Z","https://github.com/nuxt/ui/issues/5141",0.75552773,{"description":3238,"labels":3239,"number":1677,"owner":3206,"repository":3244,"state":3245,"title":3246,"updated_at":3247,"url":3248,"score":3249},"",[3240,3241],{"name":3229,"color":3230},{"name":3242,"color":3243},"provider","1161A4","fonts","closed","adobe fonts provider","2024-03-12T23:29:19Z","https://github.com/nuxt/fonts/issues/11",0.6942035,{"description":3251,"labels":3252,"number":3255,"owner":3206,"repository":3207,"state":3245,"title":3256,"updated_at":3257,"url":3258,"score":3259},"### 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```",[3253,3254],{"name":3217,"color":3218},{"name":3200,"color":3201},3517,"How To Style NavigationMenu items","2025-05-10T11:36:22Z","https://github.com/nuxt/ui/issues/3517",0.71532613,{"description":3261,"labels":3262,"number":3263,"owner":3206,"repository":3244,"state":3245,"title":3264,"updated_at":3265,"url":3266,"score":3267},"#### 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":3269,"labels":3270,"number":217,"owner":3206,"repository":3271,"state":3245,"title":3272,"updated_at":3273,"url":3274,"score":3275},"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":3277,"labels":3278,"number":3284,"owner":3206,"repository":3207,"state":3245,"title":3285,"updated_at":3286,"url":3287,"score":3288},"### 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```",[3279,3280,3281],{"name":3197,"color":3198},{"name":3200,"color":3201},{"name":3282,"color":3283},"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":3290,"labels":3291,"number":3296,"owner":3206,"repository":3207,"state":3245,"title":3297,"updated_at":3298,"url":3299,"score":3300},"### Environment\n\n- Operating System: Windows_NT\n- Node Version: v24.1.0\n- Nuxt Version: 4.1.2\n- CLI Version: 3.28.0\n- Nitro Version: 2.12.6\n- Package Manager: npm@11.3.0\n- Builder: -\n- User Config: ssr, compatibilityDate, devtools, modules, css, colorMode, ui, vite, i18n\n- Runtime Modules: @nuxt/ui@4.0.1, @nuxtjs/i18n@10.1.0\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Package\n\nv4.x\n\n### Version\n\nv4.0.1\n\n### Reproduction\n\nSuddenly codesanbox not working right now\n\n\u003Cimg width=\"1570\" height=\"562\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/c5cdb02e-bcd7-4f1d-85c6-fe46f44aac41\" />\n\n**Steps to reproduce:**\n\n- Set up a Nuxt 4 project with Nuxt UI (version 4+).\n- Implement a UNavigationMenu component with nested children items.\n- In the ui prop of UNavigationMenu, define both link and childLink with conflicting horizontal padding classes (e.g., link: 'px-6 ...' and childLink: 'px-10 ...').\n- Inspect the rendered HTML of the nested links in the browser developer tools.\n- Observe that the px-10 from childLink is not applied, and px-6 (or similar padding from link) remains.\n\n**Example Code**\n\n```\n\u003Ctemplate>\n \u003CUNavigationMenu :ui=\"{\n link: 'px-6 py-3 before:bg-transparent before:inset-0 before:rounded-none text-md text-white space-x-2',\n item: 'border-b border-default',\n childList: 'border-none ml-0',\n childItem: 'p-0',\n childLink: 'px-10 bg-red-500', // These styles are not fully applied\n root: 'border-t border-default'\n }\" :collapsed=\"collapsed\" :items=\"primaryItems\" orientation=\"vertical\" color=\"neutral\" />\n\u003C/template>\n\n\u003Cscript setup lang=\"ts\">\nimport type { NavigationMenuItem } from '@nuxt/ui'\n\ninterface Props {\n collapsed?: boolean\n}\n\ndefineProps\u003CProps>()\n\n\nconst primaryItems = computed\u003CNavigationMenuItem[][]>(() => [[\n {\n label: 'Portfolios',\n icon: 'i-lucide-briefcase',\n to: '/portfolio',\n children: [ // These children's links are affected\n {\n label: 'Portfolio 1',\n description: 'Description 1',\n to: `/portfolio/1`,\n active: false\n },\n {\n label: 'Portfolio 2',\n description: 'Description 2',\n to: `/portfolio/2`,\n active: false\n }\n ]\n }\n]])\n\u003C/script>\n```\n\n### Description\n\nThe ui.childLink slot within the UNavigationMenu component is not applying any custom Tailwind CSS classes to the links of nested list items (children of items). This issue persists even when ui.link styles are not defined or do not conflict, indicating a broader problem with the childLink slot's functionality. This affects all classes defined in childLink, not just padding.\n\n**Expected Behavior:**\n\nStyles defined in ui.childLink (e.g., px-10, bg-red-500, etc.) should be exclusively and consistently applied to the \u003Ca> tags of nested list items.\n\n**Current Behavior:**\n\nDespite defining ui.childLink with various Tailwind CSS classes (e.g., 'px-10 bg-red-500') for UNavigationMenu, none of these styles are applied to the rendered HTML for nested links (children of items) in the DOM. The links retain their default styling or styling inherited from other sources, completely ignoring the childLink definition. This happens even when the ui.link slot is empty or configured not to conflict.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3292,3293,3294],{"name":3197,"color":3198},{"name":3203,"color":3204},{"name":3295,"color":3201},"v4",5223,"[NavigationMenu]: childLink styles not applying to nested list item links","2025-10-21T10:25:02Z","https://github.com/nuxt/ui/issues/5223",0.73931605,{"description":3302,"labels":3303,"number":3306,"owner":3206,"repository":3207,"state":3245,"title":3307,"updated_at":3308,"url":3309,"score":3310},"### 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```",[3304,3305],{"name":3197,"color":3198},{"name":3200,"color":3201},2766,"Badge border radius is wrong (NavigationMenu)","2024-11-26T11:23:27Z","https://github.com/nuxt/ui/issues/2766",0.7394033,["Reactive",3312],{},["Set"],["ShallowReactive",3315],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fxz1vbJlEMQdrAZngqUSnPiYmoUY93TMuZ4ePTtpZDmU":-1},"/nuxt/icon/138"]