\n\n### Logs\n\n```shell-script\n\n```",[3134,3137,3140],{"name":3135,"color":3136},"bug","d73a4a",{"name":3138,"color":3139},"v3","49DCB8",{"name":3141,"color":3142},"triage","ffffff",4449,"nuxt","ui","open","Interfering Dropdown in `UNavigationMenu` component when using sections","2025-07-08T21:08:13Z","https://github.com/nuxt/ui/issues/4449",0.682073,{"description":3152,"labels":3153,"number":3157,"owner":3144,"repository":3145,"state":3146,"title":3158,"updated_at":3159,"url":3160,"score":3161},"### Environment\n\n- Operating System: Linux\n- Node Version: v24.4.1\n- Nuxt Version: 3.18.0\n- CLI Version: 3.27.0\n- Nitro Version: 2.12.4\n- Package Manager: npm@11.4.2\n- Builder: -\n- User Config: devtools, ssr, security, sourcemap, vite, sentry, future, compatibilityDate, css, modules, runtimeConfig, app\n- Runtime Modules: @nuxt/ui-pro@3.3.2, @nuxt/eslint@1.7.1, nuxt-security@2.3.0, @vueuse/nuxt@13.6.0, @sentry/nuxt/module@9.43.0\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Package\n\nv3.x\n\n### Version\n\nv3.18.0\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/rspshv\n\n### Description\n\nWhen working with slideovers, if we open it from a DropdownMenu, an outside click is triggered, directly closing the slideover after opening.\n\nIf we add a timeout before opening, the outside click is triggered befor the slideover is opened, hence producing the expected behavior\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3154,3155,3156],{"name":3135,"color":3136},{"name":3138,"color":3139},{"name":3141,"color":3142},4839,"Slideover does not work when called from DropdownMenu","2025-09-01T06:45:41Z","https://github.com/nuxt/ui/issues/4839",0.69127566,{"description":3163,"labels":3164,"number":3168,"owner":3144,"repository":3145,"state":3146,"title":3169,"updated_at":3170,"url":3171,"score":3172},"### 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```",[3165,3166,3167],{"name":3135,"color":3136},{"name":3138,"color":3139},{"name":3141,"color":3142},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.7048576,{"description":3174,"labels":3175,"number":3184,"owner":3144,"repository":3145,"state":3185,"title":3186,"updated_at":3187,"url":3188,"score":3189},"### Environment\n\nOperating System: Windows 11\nNode Version: v22.14.0\nNuxt Version: 3.17.3\nNitro Version: 2.11.12\nBrowser: Firefox v139.0.1\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.3\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/arrow-issue-in-dropdownmenu-jmq5jf\n\n### Description\n\nHi,\nI've noticed an issue when using backdrop-blur on DropdownMenu. When the backdrop-blur utility is applied to the background, the arrow becomes hidden or invisible. However, once I remove the backdrop-blur, the arrow displays correctly again.\n\nI've created an example with two DropdownMenus — one with backdrop-blur applied and one without. You should be able to see the issue.\n\nCould you please take a look and fix the issue? Thank you!\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3176,3177,3178,3179,3182],{"name":3135,"color":3136},{"name":3138,"color":3139},{"name":3141,"color":3142},{"name":3180,"color":3181},"closed-by-bot","ededed",{"name":3183,"color":3181},"stale",4294,"closed","Arrow Hidden When backdrop-blur Is Used on DropdownMenu","2025-08-20T02:08:24Z","https://github.com/nuxt/ui/issues/4294",0.6555925,{"description":3191,"labels":3192,"number":3196,"owner":3144,"repository":3145,"state":3185,"title":3186,"updated_at":3197,"url":3198,"score":3199},"### Environment\n\n- Operating System: `Windows 11`\n- Node Version: `v22.14.0`\n- Nuxt Version: `3.17.3`\n- Nitro Version: `2.11.12`\n\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.17.3\n\n### Reproduction\n\n[https://codesandbox.io/p/devbox/nuxt-ui3-n3sxks](https://codesandbox.io/p/devbox/nuxt-ui3-n3sxks)\n\n### Description\n\nHi,\nI've noticed an issue when using backdrop-blur on components that include an arrow (such as DropdownMenu). When the backdrop-blur utility is applied to the background, the arrow becomes hidden or invisible. However, once I remove the backdrop-blur, the arrow displays correctly again.\n\nCould you please look into this? I'm currently using Nuxt UI Pro in development.\n\nUPADTE:\nIt seems that this issue only occurs with the DropdownMenu component.\n\n### Additional context\n\nMy ui config:\n```\ndropdownMenu: {\n slots: {\n content: 'dropdown min-w-32 bg-(--ui-dropdown-bg)/75 backdrop-blur-sm border border-(--ui-dropdown-border) shadow-lg shadow-(--ui-shadow) rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-dropdown-border) divide-y divide-(--ui-dropdown-separator) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]',\n arrow: 'fill-(--ui-dropdown-border)',\n group: 'p-1 isolate',\n label: 'w-full flex items-center font-semibold text-(--ui-text-highlighted)',\n separator: '-mx-1 my-1 h-px bg-(--ui-dropdown-separator)',\n item: 'relative w-full cursor-pointer flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75',\n itemLeadingIcon: 'shrink-0',\n itemLeadingAvatar: 'shrink-0',\n itemLeadingAvatarSize: '',\n itemTrailing: 'ms-auto inline-flex gap-1.5 items-center',\n itemTrailingIcon: 'shrink-0',\n itemTrailingKbds: 'hidden lg:inline-flex items-center shrink-0',\n itemTrailingKbdsSize: '',\n itemLabel: 'truncate',\n itemLabelExternalIcon: 'inline-block size-3 align-top text-(--ui-text-dimmed)'\n },\n variants: {\n color: {\n primary: '',\n secondary: '',\n success: '',\n info: '',\n warning: '',\n error: '',\n neutral: ''\n },\n active: {\n true: {\n item: 'text-(--ui-text-highlighted) before:bg-(--ui-bg-elevated)',\n itemLeadingIcon: 'text-(--ui-text)'\n },\n false: {\n item: [\n 'text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated) data-[state=open]:before:bg-(--ui-bg-elevated)',\n 'transition-colors before:transition-colors'\n ],\n itemLeadingIcon: [\n 'text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text)',\n 'transition-colors'\n ]\n }\n },\n loading: {\n true: {\n itemLeadingIcon: 'animate-spin'\n }\n },\n size: {\n xs: {\n label: 'p-1 text-xs gap-1',\n item: 'p-1 text-xs gap-1',\n itemLeadingIcon: 'size-4',\n itemLeadingAvatarSize: '3xs',\n itemTrailingIcon: 'size-4',\n itemTrailingKbds: 'gap-0.5',\n itemTrailingKbdsSize: 'sm'\n },\n sm: {\n label: 'p-1.5 text-xs gap-1.5',\n item: 'p-1.5 text-xs gap-1.5',\n itemLeadingIcon: 'size-4',\n itemLeadingAvatarSize: '3xs',\n itemTrailingIcon: 'size-4',\n itemTrailingKbds: 'gap-0.5',\n itemTrailingKbdsSize: 'sm'\n },\n md: {\n label: 'p-1.5 text-sm gap-1.5',\n item: 'p-1.5 text-sm gap-1.5',\n itemLeadingIcon: 'size-5',\n itemLeadingAvatarSize: '2xs',\n itemTrailingIcon: 'size-5',\n itemTrailingKbds: 'gap-0.5',\n itemTrailingKbdsSize: 'md'\n },\n nm: {\n label: 'p-1.5 text-sm gap-1.5',\n item: 'p-1.5 text-sm gap-1.5',\n itemLeadingIcon: 'size-6 text-lg',\n itemLeadingAvatarSize: '2xs',\n itemTrailingIcon: 'size-6 text-lg',\n itemTrailingKbds: 'gap-0.5',\n itemTrailingKbdsSize: 'md'\n },\n lg: {\n label: 'p-2 text-sm gap-2',\n item: 'p-2 text-sm gap-2',\n itemLeadingIcon: 'size-5',\n itemLeadingAvatarSize: '2xs',\n itemTrailingIcon: 'size-5',\n itemTrailingKbds: 'gap-1',\n itemTrailingKbdsSize: 'md'\n },\n xl: {\n label: 'p-2 text-base gap-2',\n item: 'p-2 text-base gap-2',\n itemLeadingIcon: 'size-6',\n itemLeadingAvatarSize: 'xs',\n itemTrailingIcon: 'size-6',\n itemTrailingKbds: 'gap-1',\n itemTrailingKbdsSize: 'lg'\n }\n }\n },\n compoundVariants: [\n {\n color: 'primary',\n active: false,\n class: {\n item: 'text-(--ui-primary) data-highlighted:text-(--ui-primary) data-highlighted:before:bg-(--ui-primary)/10 data-[state=open]:before:bg-(--ui-primary)/10',\n itemLeadingIcon: 'text-(--ui-primary)/75 group-data-highlighted:text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)'\n }\n },\n {\n color: 'primary',\n active: true,\n class: {\n item: 'text-(--ui-primary) before:bg-(--ui-primary)/10',\n itemLeadingIcon: 'text-(--ui-primary)'\n }\n }\n ],\n defaultVariants: {\n size: 'md'\n }\n },\n```",[3193,3194,3195],{"name":3135,"color":3136},{"name":3138,"color":3139},{"name":3141,"color":3142},4204,"2025-06-05T10:54:18Z","https://github.com/nuxt/ui/issues/4204",0.66645247,{"description":3201,"labels":3202,"number":3206,"owner":3144,"repository":3145,"state":3185,"title":3207,"updated_at":3208,"url":3209,"score":3210},"### Environment\n\nnot needed\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.1\n\n### Reproduction\n\ncheck current docs: https://ui.nuxt.com/components/navigation-menu#content-orientation\n\n### Description\n\n\n\nThe dropdown is at wrong position... also the \"arrow\" prop doesnt work\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3203,3204,3205],{"name":3135,"color":3136},{"name":3138,"color":3139},{"name":3141,"color":3142},4073,"UNavigationMenu: Dropdown broken","2025-05-13T12:02:03Z","https://github.com/nuxt/ui/issues/4073",0.67189336,{"description":3212,"labels":3213,"number":3216,"owner":3144,"repository":3145,"state":3185,"title":3217,"updated_at":3218,"url":3219,"score":3220},"### 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```",[3214,3215],{"name":3135,"color":3136},{"name":3138,"color":3139},2766,"Badge border radius is wrong (NavigationMenu)","2024-11-26T11:23:27Z","https://github.com/nuxt/ui/issues/2766",0.68261784,{"description":3222,"labels":3223,"number":3229,"owner":3144,"repository":3145,"state":3185,"title":3230,"updated_at":3231,"url":3232,"score":3233},"### Environment\n\n- Operating System: `Windows_NT`\n- Node Version: `v22.13.1`\n- Nuxt Version: `3.17.2`\n- CLI Version: `3.25.0`\n- Nitro Version: `2.11.11`\n- Package Manager: `yarn@1.22.22`\n- Builder: `-`\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.1.1\n\n### Reproduction\n\nhttps://github.com/user-attachments/assets/3204c1e4-c367-4397-b3fc-7a8c335bf000\n\n### Description\n\nCheck current docs. https://ui.nuxt.com/components/input-menu#items\n\n### Additional context\n\nWhen clicking on the dropdown the first time not all items are shown. When clicking the second time the items are all there.\n\n### Logs\n\n```shell-script\n\n```",[3224,3225,3228],{"name":3135,"color":3136},{"name":3226,"color":3227},"duplicate","cfd3d7",{"name":3138,"color":3139},4100,"InputMenu: Not all items shown in dropdown on first open","2025-05-07T14:53:25Z","https://github.com/nuxt/ui/issues/4100",0.68599147,{"description":3235,"labels":3236,"number":3239,"owner":3144,"repository":3145,"state":3185,"title":3240,"updated_at":3241,"url":3242,"score":3243},"### Environment\n\n- Operating System: Linux\n- Node Version: v22.4.0\n- Nuxt Version: 3.14.1592\n- CLI Version: 3.15.0\n- Nitro Version: 2.10.4\n- Package Manager: pnpm@9.14.2\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/ui@3.0.0-alpha.9, nuxt-auth-sanctum@0.5.2, @vueuse/nuxt@11.3.0\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.14.1592\n\n### Reproduction\n\n```vue\n\u003Cscript setup lang=\"ts\"\nconst placeItems = ref([{ id: 1, name: 'Place 1' }, { id: 2, name: 'Place 2' }])\n\u003C/script>\n\n\u003Ctemplate>\n\u003CUInputMenu :items=\"placeItems\"\n value-key=\"id\"\n label-key=\"name\"\n class=\"w-full mb-4\"\n multiple />\n\n\u003CUInputMenu :items=\"placeItems\"\n value-key=\"id\"\n label-key=\"name\"\n class=\"w-full\"/>\n\u003C/template>\n```\n\n### Description\nIn my opinion, the border, when focusing, should have the same color as when the parameter is absent `multiple`.\nWith white border looks bad :D\nhttps://skr.sh/vSqjqLYGgHO",[3237,3238],{"name":3135,"color":3136},{"name":3138,"color":3139},2742,"UInputMenu has wrong border when focused in multiple mode","2024-12-05T13:48:56Z","https://github.com/nuxt/ui/issues/2742",0.69429445,{"description":3245,"labels":3246,"number":3249,"owner":3144,"repository":3145,"state":3185,"title":3250,"updated_at":3251,"url":3252,"score":3253},"### Environment\n\n- Operating System: Darwin\n- Node Version: v18.20.6\n- Nuxt Version: 3.15.4\n- CLI Version: 3.21.1\n- Nitro Version: 2.10.4\n- Package Manager: yarn@1.22.22\n- Builder: -\n- User Config: -\n- Runtime Modules: -\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.0-alpha.13\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/modest-agnesi-drlrh4?file=%2Fapp%2Fpages%2Findex.vue%3A24%2C24\n\n### Description\n\nWhen I close a `UDrawer` that I opened via an action from a `UDropdownMenu`, the style on my \u003Cbody> tag still contains `overflow: hidden` and `user-select: none`, which prevents interaction with the page.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3247,3248],{"name":3135,"color":3136},{"name":3138,"color":3139},3406,"User interaction lock after a Drawer/DropdownMenu","2025-02-27T20:57:27Z","https://github.com/nuxt/ui/issues/3406",0.6967565,["Reactive",3255],{},["Set"],["ShallowReactive",3258],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fH_OdgXHy_UrirtvWTgVe9ja4ss0PejjFT_W-W1M4F7g":-1},"/nuxt/ui/3315"]