\n\nCompact sidebar upon hovering\n\n\u003Cimg width=\"278\" height=\"458\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/df602a26-f92e-42d6-a346-67e0cefbe251\" />\n\n\u003CUNavigationMenu\n :items=\"MENU_ITEMS\"\n :collapsed=\"isToggle\"\n tooltip\n popover\n orientation=\"vertical\"\n :unmount-on-hide=\"false\"\n class=\"overflow-y-auto custom-scrollbar px-2 py-2 flex-2\"\n >\n \u003C/UNavigationMenu>\n\nheres my MENU ITEMS:\nexport const MENU_ITEMS: NavigationMenuItem[] = [\n { label: 'Navigation', type: 'label' },\n {\n label: 'Transaction',\n icon: 'i-material-symbols:inventory',\n children: [\n {\n label: 'GL POS Sales Amount',\n icon: 'i-material-symbols:article-shortcut-outline',\n children: [\n {\n label: 'Process',\n icon: 'uim:process',\n to: '/pos-gl',\n },\n ],\n },\n {\n label: 'GL POS Sales Quantity',\n icon: 'i-material-symbols:inventory',\n children: [\n {\n label: 'Process',\n icon: 'uim:process',\n to: '/pos-inventory',\n },\n ],\n },\n {\n label: 'Purchase Order',\n icon: 'i-icon-park-outline:order',\n children: [\n {\n label: 'Load',\n icon: 'material-symbols:database',\n to: '/purchase-order/load',\n },\n {\n label: 'Process',\n icon: 'uim:process',\n to: '/purchase-order/process',\n },\n ],\n },\n {\n label: 'PO Receiving',\n icon: 'i-cuida:box-outline',\n children: [\n {\n label: 'Load',\n icon: 'material-symbols:database',\n to: '/po-receiving/load',\n },\n {\n label: 'Process',\n icon: 'uim:process',\n to: '/po-receiving/process',\n },\n ],\n },\n {\n label: 'AP Invoice',\n icon: 'i-hugeicons:invoice-02',\n children: [\n {\n label: 'Load',\n icon: 'material-symbols:database',\n to: '/ap-invoice/load',\n },\n {\n label: 'Process',\n icon: 'uim:process',\n to: '/ap-invoice/process',\n },\n ],\n },\n {\n label: 'AP Payment',\n icon: 'i-hugeicons:payment-01',\n children: [\n {\n label: 'Load',\n icon: 'material-symbols:database',\n to: '/ap-payment/load',\n },\n {\n label: 'Process',\n icon: 'uim:process',\n to: '/ap-payment/process',\n },\n ],\n },\n ],\n },\n ],\n },\n];\n\n\n\nThank you nuxt ui fam.\n\n",[3137,3140],{"name":3138,"color":3139},"question","d876e3",{"name":3141,"color":3142},"v3","49DCB8",4543,"nuxt","ui","open","[UNavigationMenuBar] nested child pop up not appearing","2025-07-17T03:18:41Z","https://github.com/nuxt/ui/issues/4543",0.73383623,{"description":3152,"labels":3153,"number":3157,"owner":3144,"repository":3144,"state":3146,"title":3158,"updated_at":3159,"url":3160,"score":3161},"### Environment\n\n- Operating System: `Darwin`\n- Node Version: `v20.10.0`\n- Nuxt Version: `3.14.1592`\n- CLI Version: `3.16.0`\n- Nitro Version: `2.10.4`\n- Package Manager: `pnpm@9.12.1`\n- Builder: `-`\n- User Config: `default`\n- Runtime Modules: `@unocss/nuxt@0.65.2`, `@nuxt/eslint@0.7.3`, `@nuxt/icon@1.10.2`, `@nuxt/image@1.8.1`, `@vueuse/nuxt@12.0.0`\n- Build Modules: `-`\n\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-xyfrn9ic?file=pages%2Fparent%2Fchild1.vue\n\n### Describe the bug\n\nBefore I define an alias for `/parent` in `child1.vue`, whether I navigate to `/parent/child1` or `/parent/child2`, the `/parent` link will be active.\n\nHowever, after I define the alias, when I navigate to `/parent/child2`, the `/parent` link will not be active.\n\n### Additional context\n\nI tested this behavior with `vue-router`, which works normally. I guess this is an issue with `nuxt`.",[3154],{"name":3155,"color":3156},"pending triage","E99695",30340,"route alias causes `activeClass` not working properly","2024-12-23T08:29:52Z","https://github.com/nuxt/nuxt/issues/30340",0.7576974,{"description":3163,"labels":3164,"number":3172,"owner":3144,"repository":3145,"state":3146,"title":3173,"updated_at":3174,"url":3175,"score":3176},"### Environment\n\n------------------------------\n- Operating System: Windows_NT\n- Node Version: v22.18.0\n- Nuxt Version: 4.0.3\n- CLI Version: 3.28.0\n- Nitro Version: 2.12.4\n- Package Manager: pnpm@10.14.0\n- Builder: -\n- User Config: devtools, components, modules, css, supabase, runtimeConfig, compatibilityDate\n- Runtime Modules: @nuxtjs/robots@4.1.11, @nuxtjs/supabase@1.6.0, @formkit/auto-animate/nuxt@0.8.2, @vueuse/nuxt@13.6.0, @nuxt/image@1.11.0, @nuxt/ui@3.3.0, motion-v/nuxt@1.7.0\n- Build Modules: -\n------------------------------\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv4.0.3\n\n### Reproduction\n\n1. add a breadcrumb\n\n```vue\n\u003CUBreadcrumb\n :items=\"[\n {\n label: 'UXHMAC',\n to: '/lucky-draw',\n active: route.path == '/lucky-draw',\n },\n {\n label: 'Leaderboard',\n to: '/lucky-draw/leaderboard',\n active: route.path == '/lucky-draw/leaderboard',\n },\n {\n label: 'My Profile',\n to: '/lucky-draw/profile',\n active: route.path == '/lucky-draw/profile',\n },\n {\n label: 'My Rewards',\n to: '/lucky-draw/rewards',\n active: route.path == '/lucky-draw/rewards',\n },\n ...(user?.role == 'service_role'\n ? [\n {\n label: 'Manage Users',\n to: '/lucky-draw/admin/users',\n active: route.path == '/lucky-draw/admin/users',\n },\n {\n label: 'Manage Gifts',\n to: '/lucky-draw/admin/gifts',\n active: route.path == '/lucky-draw/admin/gifts',\n },\n {\n label: 'Manage Rewards',\n to: '/lucky-draw/admin/rewards',\n active: route.path == '/lucky-draw/admin/rewards',\n },\n {\n label: 'Settings',\n to: '/lucky-draw/settings',\n active: route.path == '/lucky-draw/settings',\n },\n ]\n : []),\n ]\"\n />\n```\n\n2. navigate to /lucky-draw/leaderboard\n3. the leaderboard breadcrumb item should be now in active state, but it's not working\n\n### Description\n\nThe leaderboard should be in active state but it's not, the last item always in active state\n\n\u003Cimg width=\"1142\" height=\"1314\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/6eb64e3c-e25d-403a-9124-bc118a463f40\" />\n\n\u003Cimg width=\"1382\" height=\"538\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/a5447b9b-f38c-4cb4-8957-5d8a69937690\" />\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3165,3168,3169],{"name":3166,"color":3167},"bug","d73a4a",{"name":3141,"color":3142},{"name":3170,"color":3171},"triage","ffffff",4771,"[Bug] breadcrumb's active state not working","2025-08-17T04:15:26Z","https://github.com/nuxt/ui/issues/4771",0.7714887,{"description":3178,"labels":3179,"number":3180,"owner":3144,"repository":3181,"state":3182,"title":3183,"updated_at":3184,"url":3185,"score":3186},"",[],100,"nuxt.com","closed","Implement subnavbar component","2022-03-08T16:38:29Z","https://github.com/nuxt/nuxt.com/issues/100",0.73281395,{"description":3178,"labels":3188,"number":3189,"owner":3144,"repository":3181,"state":3182,"title":3183,"updated_at":3190,"url":3191,"score":3186},[],101,"2022-03-01T16:38:09Z","https://github.com/nuxt/nuxt.com/issues/101",{"description":3193,"labels":3194,"number":3199,"owner":3144,"repository":3144,"state":3182,"title":3200,"updated_at":3201,"url":3202,"score":3203},"### Environment\n\nnuxt 3.4.1\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-nugbe3?file=app.vue\n\n### Describe the bug\n\nWhen using NuxtLink's activeClass, it does not apply the [activeClass](https://nuxt.com/docs/api/components/nuxt-link#props) when visiting child routes of a parent. For example, if I have a persistently visible NuxtLink to `/items` with an `activeClass` specified like so:\r\n\r\n```\r\n\u003Cnav>\r\n \u003Cnuxt-link to=\"/items\" activeClass=\"foo\">Items\u003C/nuxt-link>\r\n\u003C/nav>\r\n```\r\nWhen I visit the `/items` route, the link becomes active and the `foo` class is applied as expected. Great.\r\n\r\nHowever, when I visit `/items/123`, the link becomes no longer active and the `foo` class is removed. I would expect that behavior if I had specified `exactActiveClass`, but I did not use `exactActiveClass` — I used regular old `activeClass`.\r\n\r\nFWIW, NuxtLink under Nuxt 2 works as I expected.\r\n\r\nI put together a minimal repro here: https://stackblitz.com/edit/github-nugbe3?file=app.vue\r\n\r\nThank you ❤️ \n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3195,3198],{"name":3196,"color":3197},"3.x","29bc7f",{"name":3155,"color":3156},20338,"NuxtLink activeClass not applied on child routes","2025-01-24T12:06:48Z","https://github.com/nuxt/nuxt/issues/20338",0.73442036,{"description":3205,"labels":3206,"number":3210,"owner":3144,"repository":3144,"state":3182,"title":3211,"updated_at":3212,"url":3213,"score":3214},"i want only style parent links when select the child route.. but these routes not actully child.. is there any way to make this work..\r\n\r\nthis is my navigation html codes\r\n```html\r\n\u003Cul class=\"nav navbar-nav navbar-right\">\r\n \u003Cli id=\"home\" class=\"mnu\">\u003Cnuxt-link to=\"/home\">HOME\u003C/nuxt-link>\u003C/li>\r\n \u003Cli id=\"reward\" class=\"dropdown mnu\">\r\n \u003Cnuxt-link to=\"#\" class=\"dropdown-toggle\" data-toggle=\"dropdown\" role=\"button\" aria-haspopup=\"true\" aria-expanded=\"false\">REWARDS \u003Cspan class=\"caret\">\u003C/span>\u003C/nuxt-link>\r\n \u003Cul class=\"dropdown-menu\">\r\n \u003Cli>\u003Cnuxt-link to=\"/reward\">REWARD DISTRIBUTION ENGINE\u003C/nuxt-link>\u003C/li>\r\n \u003Cli>\u003Cnuxt-link to=\"/daily-challenges\">DAILY CHALLENGES\u003C/nuxt-link>\u003C/li>\r\n \u003Cli>\u003Cnuxt-link to=\"/revive-reward\">REVIVE REWARD\u003C/nuxt-link>\u003C/li>\r\n \u003C/ul>\r\n \u003C/li>\r\n \u003Cli id=\"logs\" class=\"dropdown mnu\">\r\n \u003Ca href=\"#\" class=\"dropdown-toggle\" data-toggle=\"dropdown\" role=\"button\" aria-haspopup=\"true\" aria-expanded=\"false\">LOGS \u003Cspan class=\"caret\">\u003C/span>\u003C/a>\r\n \u003Cul class=\"dropdown-menu\">\r\n \u003Cli>\u003Cnuxt-link to=\"/logs1\">GAMEPLAY\u003C/nuxt-link>\u003C/li>\r\n \u003Cli>\u003Cnuxt-link to=\"/logs2\">REWARDS\u003C/nuxt-link>\u003C/li>\r\n \u003Cli>\u003Cnuxt-link to=\"/logs3\">PURCHASES\u003C/nuxt-link>\u003C/li>\r\n \u003C/ul>\r\n \u003C/li>\r\n \u003Cli class=\"mnu\">\u003Ca href=\"index.php\" class=\"btn btn-default btn-sign-out\">SIGN OUT\u003C/a>\u003C/li>\r\n\u003C/ul>\r\n```\r\n\r\nJust want to highlight Home. Rewards and Logs linkes when select child of that or that one.. how to do it? \r\n\r\nthis is what i currently have...\r\n\r\n\r\n\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c871\">#c871\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3207],{"name":3208,"color":3209},"2.x","d4c5f9",1000,"Nuxt JS nuxt-link nested routes issue","2023-01-18T15:40:38Z","https://github.com/nuxt/nuxt/issues/1000",0.73873055,{"description":3216,"labels":3217,"number":3225,"owner":3144,"repository":3144,"state":3182,"title":3226,"updated_at":3227,"url":3228,"score":3229},"### Environment\n\n------------------------------\r\n- Operating System: Windows_NT\r\n- Node Version: v20.13.1\r\n- Nuxt Version: 3.12.2\r\n- CLI Version: 3.12.0\r\n- Nitro Version: 2.9.6\r\n- Package Manager: npm@10.5.2\r\n- Builder: -\r\n- User Config: devtools\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\n\n### Reproduction\n\nRepo: https://github.com/admg/nuxt_optional_route_issue\n\n### Describe the bug\n\nlayout `default.vue`:\r\n```\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003CNuxtLink to=\"/a\">Link to A\u003C/NuxtLink> \u003Cbr />\r\n \u003CNuxtLink to=\"/a/id\">Link to A + param\u003C/NuxtLink>\r\n \u003C/div>\r\n\r\n \u003Cdiv>\r\n \u003CNuxtLink to=\"/b\">Link to B\u003C/NuxtLink> \u003Cbr />\r\n \u003CNuxtLink to=\"/b/id\">Link to B + param\u003C/NuxtLink>\r\n \u003C/div>\r\n\r\n \u003Cdiv>\r\n \u003CNuxtPage />\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cstyle lang=\"css\">\r\n.router-link-active {\r\n background-color: yellow;\r\n}\r\n\u003C/style>\r\n```\r\n\r\nfolder structure:\r\n```\r\nlayouts\r\n - default.vue\r\npages\r\n - a\r\n - [[id]].vue\r\n - b\r\n - [id].vue\r\n - index.vue\r\n - a.vue\r\n - b.vue\r\n```\r\n\r\n`a.vue` and `b.vue` contains:\r\n```\r\n\u003Ctemplate>\r\n \u003CNuxtPage />\r\n\u003C/template>\r\n```\r\n\r\nWorks ok for required parameter `[id]` and not properly for optional parameter `[[id]]`.\r\nAdding `.router-link-active` class works ok for `Link to B` on `/b` route and children routes like `/b/id`.\r\nSame is not working properly for `Link to A` link. Class is added only for exact route for urls `/a` and `/a/id`\r\n\r\n\r\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3218,3219,3222],{"name":3155,"color":3156},{"name":3220,"color":3221},"pages","00DFB5",{"name":3223,"color":3224},"upstream","E8A36D",27841,"Optional route parameter doesn't trigger active class for parent links","2025-02-10T21:37:03Z","https://github.com/nuxt/nuxt/issues/27841",0.7501649,{"description":3231,"labels":3232,"number":3236,"owner":3144,"repository":3145,"state":3182,"title":3237,"updated_at":3238,"url":3239,"score":3240},"### Environment\n\n\n\n- Operating System: Darwin\n- Node Version: v23.9.0\n- Nuxt Version: 3.16.2\n- CLI Version: 3.24.1\n- Nitro Version: 2.11.8\n- Package Manager: npm@10.9.2\n- Builder: -\n- User Config: compatibilityDate, devtools, modules, components, css, devServer, ssr, vuefire, runtimeConfig\n- Runtime Modules: @nuxt/image@1.10.0, @nuxt/ui-pro@3.0.2, nuxt-vuefire@1.0.5\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.2\n\n### Reproduction\n\nThis is noticeable on the documentation [page](https://ui.nuxt.com/components/navigation-menu#orientation) for any vertical navigation menu with children navigation items. \n\n### Description\n\nThe parent item renders as a `\u003Cbutton>` tag instead of the `\u003Ca>` tags of other navigation menu items. This means the `to:` attribute is ignored (and target) and can't be clicked on. This is likely due to the parent and children being converted to a Collapsible component under the hood. \n\nWhen the orientation is horizontal, however, you can have both the parent and children be links - where they render `\u003Ca>` tags. Hovering over the horizontal parent shows the children, but the parent can still be a link.\n\nIdeally, we could set a boolean to control whether the children are converted to a Collapsible or not. Or wrap the Collapsible parent around a link. Understandably, the click then couldn't trigger opening/closing the collapsible (maybe the icon triggers opening/closing, while the label can still have the Link attributes available).\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3233,3234,3235],{"name":3166,"color":3167},{"name":3141,"color":3142},{"name":3170,"color":3171},3911,"[NavigationMenu] Vertical menu with children doesn't respect parent Link attributes.","2025-05-10T15:51:54Z","https://github.com/nuxt/ui/issues/3911",0.75639004,{"description":3242,"labels":3243,"number":3247,"owner":3144,"repository":3181,"state":3182,"title":3248,"updated_at":3249,"url":3250,"score":3251},"- [ ] Shadow on subnavbar with https://vueuse.org/core/usewindowscroll/#usewindowscroll\n- [x] Border under top navbar should be inside container\n- [x] Remove top footer border",[3244],{"name":3245,"color":3246},"enhancement","1ad6ff",119,"[Docs] Improve navbars borders","2023-02-15T12:30:41Z","https://github.com/nuxt/nuxt.com/issues/119",0.7609294,["Reactive",3253],{},["Set"],["ShallowReactive",3256],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$flgugsddxWhX3y1Opn19Kn0sJRa0UXKkueAjavQtYrPI":-1},"/nuxt/nuxt.com/250"]