\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",[3026,3029],{"name":3027,"color":3028},"question","d876e3",{"name":3030,"color":3031},"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.7873183,{"description":3041,"labels":3042,"number":3050,"owner":3033,"repository":3034,"state":3035,"title":3051,"updated_at":3052,"url":3053,"score":3054},"### Environment\n\n- Operating System: Linux\n- Node Version: v20.12.0\n- Nuxt Version: 3.17.6\n- CLI Version: 3.25.1\n- Nitro Version: 2.11.13\n- Package Manager: pnpm@8.15.6\n- Builder: -\n- User Config: modules, devtools, compatibilityDate, future, css\n- Runtime Modules: @nuxt/ui@3.2.0\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.17.6\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/new-river-kn287t\n\n### Description\n\nI'm using sections in the NavigationMenu component ([like in this example](https://ui.nuxt.com/components/navigation-menu#highlight)) and a dropdown on both sides. When you hover over the first dropdown on any side, the first dropdown of both sections are shown overlaying each other at the position of the first dropdown. The same happens with the second dropdown on each side and so on.\nThe same issue occurs, when using multiple NavigationMenu components with dropdowns on the same page.\n\n### Additional context\n\n\u003Cimg width=\"446\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/c552605a-1941-4e0d-9462-b2c5a018d8ae\" />\n\n### Logs\n\n```shell-script\n\n```",[3043,3046,3047],{"name":3044,"color":3045},"bug","d73a4a",{"name":3030,"color":3031},{"name":3048,"color":3049},"triage","ffffff",4449,"Interfering Dropdown in `UNavigationMenu` component when using sections","2025-07-08T21:08:13Z","https://github.com/nuxt/ui/issues/4449",0.7903778,{"description":3056,"labels":3057,"number":3060,"owner":3033,"repository":3061,"state":3062,"title":3063,"updated_at":3064,"url":3065,"score":3066},"\n",[3058],{"name":3044,"color":3059},"ff281a",745,"nuxt.com","closed","[Navbar] Teams are not displayed on dropdown","2022-07-02T19:05:53Z","https://github.com/nuxt/nuxt.com/issues/745",0.43638295,{"description":3068,"labels":3069,"number":93,"owner":3033,"repository":3061,"state":3062,"title":3070,"updated_at":3071,"url":3072,"score":3073},"",[],"Teams dropdown","2022-02-03T15:03:43Z","https://github.com/nuxt/nuxt.com/issues/1",0.6653024,{"description":3075,"labels":3076,"number":3078,"owner":3033,"repository":3061,"state":3062,"title":3079,"updated_at":3080,"url":3081,"score":3082},"\n",[3077],{"name":3044,"color":3059},50,"TeamsDropdown: No ellipsis on team label and avatar placeholder","2023-02-15T12:30:32Z","https://github.com/nuxt/nuxt.com/issues/50",0.7147397,{"description":3084,"labels":3085,"number":3078,"owner":3033,"repository":3087,"state":3062,"title":3088,"updated_at":3089,"url":3090,"score":3082},"To investigate",[3086],{"name":3044,"color":3045},"scripts","StripePricingTable script not triggering load promise ","2024-05-07T03:31:48Z","https://github.com/nuxt/scripts/issues/50",{"labels":3092,"number":3101,"owner":3033,"repository":3033,"state":3062,"title":3102,"updated_at":3103,"url":3104,"score":3105},[3093,3095,3098],{"name":3094,"color":3049},"stale",{"name":3096,"color":3097},"pending triage","E99695",{"name":3099,"color":3100},"2.x","d4c5f9",7075,"Bootstrap Vue Navbar Dropdown Not Working After Nuxt Generate But Works In Nuxt Dev","2023-01-22T15:34:48Z","https://github.com/nuxt/nuxt/issues/7075",0.74369866,{"description":3068,"labels":3107,"number":3109,"owner":3033,"repository":3061,"state":3062,"title":3110,"updated_at":3111,"url":3112,"score":3113},[3108],{"name":3044,"color":3059},14,"Team should be fetched when switching param","2022-02-07T13:31:36Z","https://github.com/nuxt/nuxt.com/issues/14",0.7489766,{"description":3115,"labels":3116,"number":3118,"owner":3033,"repository":3061,"state":3062,"title":3119,"updated_at":3120,"url":3121,"score":3122},"https://volta.s3.fr-par.scw.cloud/Clean_Shot_2022_02_10_at_13_23_25_55c00268bc.mp4\n ",[3117],{"name":3044,"color":3059},52,"Team name in `[team]/settings`: input not updated","2023-02-15T12:30:33Z","https://github.com/nuxt/nuxt.com/issues/52",0.75894326,{"description":3124,"labels":3125,"number":3127,"owner":3033,"repository":3061,"state":3062,"title":3128,"updated_at":3129,"url":3130,"score":3131},"- [ ] Delay when hovering\n- [ ] Button shouldn't be clickable\n- [ ] When moving the mouse between the trigger and the popover, it disappears\n\n> I assume this would also be applicable to `Dropdown` component",[3126],{"name":3044,"color":3059},315,"Navbar popover issues with hover mode","2023-02-15T12:32:07Z","https://github.com/nuxt/nuxt.com/issues/315",0.77482486,["Reactive",3133],{},["Set"],["ShallowReactive",3136],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fkyRfkSAipQsKSeNnWudcYzyh6VR3qtvKrIdiIn0LilA":-1},"/nuxt/test-utils/745"]