\n\nUnfortunately, `UButton` doesnt have this feature. Even with the prop `trailingIcon` the same behavior cant be archived manually in an easy manner because the icon wont be small, at the top and grayed out. Currently it would require to make it fully manually:\n\n```\n\u003CUButton :to=\"externalUrl\" target=\"_blank\">\n \u003Cspan\n >To external provider\u003CIcon\n name=\"i-material-symbols:arrow-outward-rounded\"\n class=\"size-3 align-top opacity-70\"\n />\u003C/span>\n \u003C/UButton>\n```\n\n\u003Cimg width=\"191\" height=\"48\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/f89198d7-a64f-4a04-815b-41ddba68c3cc\" />\n\nIt would be great if a button would either automatically add the icon, like `\u003CUNavigationMenu>` does, or would have a prop `externalIcon` that can be set to true.\n\n### Additional context\n\n\n\n_No response_",[3137,3140,3143],{"name":3138,"color":3139},"enhancement","a2eeef",{"name":3141,"color":3142},"v3","49DCB8",{"name":3144,"color":3145},"triage","ffffff",4501,"nuxt","ui","open","Add external icon option to UButton and ULink","2025-07-11T09:39:53Z","https://github.com/nuxt/ui/issues/4501",0.72174335,{"description":3155,"labels":3156,"number":3160,"owner":3147,"repository":3148,"state":3149,"title":3161,"updated_at":3162,"url":3163,"score":3164},"### 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 inactive: 'text-gray-700 hover:bg-gray-100'\n }\n }\"\n tooltip\n popover\n/>\n```",[3157],{"name":3158,"color":3159},"question","d876e3",4849,"Can `UNavigationMenu` support active styles via the ui prop?","2025-08-30T10:29:01Z","https://github.com/nuxt/ui/issues/4849",0.72993296,{"description":3166,"labels":3167,"number":3173,"owner":3147,"repository":3148,"state":3149,"title":3174,"updated_at":3175,"url":3176,"score":3177},"",[3168,3169,3170],{"name":3138,"color":3139},{"name":3141,"color":3142},{"name":3171,"color":3172},"reka-ui","56d799",2337,"[DropdownMenu/Popover/Tooltip] Improve arrow styling like `NavigationMenu` ","2024-10-08T10:12:48Z","https://github.com/nuxt/ui/issues/2337",0.7412595,{"description":3179,"labels":3180,"number":3184,"owner":3147,"repository":3148,"state":3149,"title":3185,"updated_at":3186,"url":3187,"score":3188},"### Description\n\n\n## Problem\n\nCurrently, there's no straightforward way to disable anchor links for specific MDC component instances. The existing approaches have significant limitations:\n\n1. **Global `mdc` config in `nuxt.config.ts` is ignored** when using `@nuxt/ui-pro` with `mdc: true`\n2. **app.config.ts prose configuration affects all MDC components globally**, requiring extensive slot overrides\n3. **No component-level control** over anchor link behavior\n\n## Current Workaround\n\nTo disable anchor links, I currently need to configure every heading level in `app.config.ts`:\n\n```typescript\nexport default defineAppConfig({\n uiPro: {\n prose: {\n h1: {\n slots: {\n base: 'mt-0',\n link: 'cursor-default',\n leading: 'hidden p-0',\n leadingIcon: 'hidden'\n }\n },\n h2: {\n slots: {\n base: 'mt-0',\n link: 'cursor-default', \n leading: 'hidden p-0',\n leadingIcon: 'hidden'\n }\n },\n // ... repeat for h3-h6\n }\n }\n})\n```\n\nThis affects **all** MDC components across the entire application.\n\n\n## Proposed Solution\n\nAllow component-level UI configuration via a `:ui` prop on the `\u003CMDC>` component:\n\n```html\n\u003C!-- Disable anchor links for this specific instance -->\n\u003CMDC \n :value=\"content\" \n :ui=\"{ \n prose: { \n anchors: false \n } \n }\" \n/>\n\n\u003C!-- Or more granular control -->\n\u003CMDC \n :value=\"content\"\n :ui=\"{\n prose: {\n h1: { leading: 'hidden', leadingIcon: 'hidden' },\n h2: { leading: 'hidden', leadingIcon: 'hidden' }\n }\n }\"\n/>\n```\n\n## Use Case\n\n**Displaying AI/LLM generated content** where anchor links are undesirable:\n- Game interfaces showing AI-generated text\n- Chat applications with LLM responses \n- Content previews or excerpts\n- Educational tools displaying sample outputs\n\nIn these scenarios, anchor links serve no purpose and can be distracting or break the user experience.\n\n## Expected Behavior\n\n- Component-level `:ui` prop should merge with global prose configuration\n- Should work consistently with both `@nuxt/content` and standalone MDC usage\n- Should not require global configuration changes for per-component customization\n\n## Current Versions\n\n- `@nuxt/ui-pro` (v3)\n- 'uiPro.mdc' set to true or false in `nuxt.config` does not make a difference\n\n## Additional Context\n\nThis would align with Nuxt UI's existing pattern of allowing component-level customization via `:ui` props, providing developers with fine-grained control while maintaining sensible defaults.\n\n### Additional context\n\n_No response_",[3181,3182,3183],{"name":3138,"color":3139},{"name":3141,"color":3142},{"name":3144,"color":3145},4216,"Allow disabling anchor links per MDC component instance via :ui prop","2025-05-24T15:32:22Z","https://github.com/nuxt/ui/issues/4216",0.7498244,{"description":3190,"labels":3191,"number":3192,"owner":3147,"repository":3193,"state":3149,"title":3194,"updated_at":3195,"url":3196,"score":3197},"According to the [Vue-Iconify Docs](https://iconify.design/docs/icon-components/vue/transform.html#rotation) one can pass a `rotate` and `flip` Prop to transform the Icon, to display it in different orientations.\r\n\r\n```vue\r\n\u003Ctemplate>\r\n \u003CIcon name=\"ic:round-double-arrow\" size=\"26\" :rotate=\"flip && '2'\" />\r\n\u003C/template>\r\n\r\n\u003Cscript setup lang=\"ts\">\r\nconst flip = ref(false);\r\n\u003C/script>\r\n```\r\n\r\nWhile this works fine with nuxt-icon during development, it breaks in a Prod build. The transformations no longer get applied.\r\n\r\nIt would be great if nuxt-icon could also support these props, if possible. I'm open to help with this issue if someone could give me some pointers where to start.",[],138,"icon","[Feature Request] Support Iconify Transformations","2024-03-15T09:15:14Z","https://github.com/nuxt/icon/issues/138",0.7584148,{"description":3199,"labels":3200,"number":3206,"owner":3147,"repository":3148,"state":3149,"title":3207,"updated_at":3208,"url":3209,"score":3210},"### Environment\n\n\"nuxt\": \"^3.17.5\",\n\"@nuxt/ui\": \"^3.1.3\",\n\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.1.3\n\n### Reproduction\n\nFollowing is my `components/AppHeader.vue`:\n\n```\n\u003Ctemplate>\n \u003Cheader class=\"bg-white sticky top-0 z-50\">\n \u003Cnav class=\"hidden lg:flex flex-1 justify-center\">\n \u003CUNavigationMenu\n v-model=\"activeSection\"\n :items=\"navItems\"\n class=\"space-x-2\"\n highlight\n highlight-color=\"primary\"\n >\n \u003Ctemplate #item=\"{ item, active }\">\n \u003CULink\n as-child\n :to=\"{ path: '', hash: `#${item.to}` }\"\n exact-hash\n class=\"px-4 py-2 rounded-md transition\"\n aria-label=\"Go to {{ item.label }}\"\n >\n \u003Cspan class=\"inline-flex items-center\">\n \u003CUIcon v-if=\"item.icon\" :name=\"item.icon\" class=\"size-5 mr-2\" />\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```",[3201,3204,3205],{"name":3202,"color":3203},"bug","d73a4a",{"name":3141,"color":3142},{"name":3144,"color":3145},4416,"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.7656821,{"description":3212,"labels":3213,"number":3217,"owner":3147,"repository":3148,"state":3149,"title":3218,"updated_at":3219,"url":3220,"score":3221},"### 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```",[3214,3215,3216],{"name":3202,"color":3203},{"name":3141,"color":3142},{"name":3144,"color":3145},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.76976115,{"description":3223,"labels":3224,"number":3228,"owner":3147,"repository":3148,"state":3149,"title":3229,"updated_at":3230,"url":3231,"score":3232},"### 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```",[3225,3226,3227],{"name":3202,"color":3203},{"name":3141,"color":3142},{"name":3144,"color":3145},4449,"Interfering Dropdown in `UNavigationMenu` component when using sections","2025-07-08T21:08:13Z","https://github.com/nuxt/ui/issues/4449",0.772565,{"description":3234,"labels":3235,"number":3238,"owner":3147,"repository":3148,"state":3239,"title":3240,"updated_at":3241,"url":3242,"score":3243},"### Description\n\nI'm trying to apply styling to specific elements, this is my current code for initializing my NavigationMenu items:\n```js\nconst items = ref\u003CNavigationMenuItem[]>([\n [\n {\n label: \"Something\",\n icon: \"\",\n to: \"/\"\n }\n ],\n [\n {\n icon: \"i-simple-icons-discord\",\n to: \"https://discord.gg/....\"\n }\n ]\n ])\n```\n\nI am trying to apply styling using tailwind like you would via `:ui=\"\"` on the `UNavigationMenu` element but in this case I want to change `linkLeadingIcon` only for the discord element, and replace `list` entirely for the `Something` element. I've been scouring the docs and such and I haven't been able to really find a way to do this. As far as I can tell I can't do styling based on label/icon/etc using compound variants.\n\nI'm fairly new to Nuxt UI so might be missing a obvious solution, thanks!",[3236,3237],{"name":3158,"color":3159},{"name":3141,"color":3142},3683,"closed","NavigationMenu styling for specific items","2025-04-18T18:47:43Z","https://github.com/nuxt/ui/issues/3683",0.7105975,{"description":3245,"labels":3246,"number":3249,"owner":3147,"repository":3148,"state":3239,"title":3250,"updated_at":3251,"url":3252,"score":3253},"### 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```",[3247,3248],{"name":3158,"color":3159},{"name":3141,"color":3142},3517,"How To Style NavigationMenu items","2025-05-10T11:36:22Z","https://github.com/nuxt/ui/issues/3517",0.7255942,["Reactive",3255],{},["Set"],["ShallowReactive",3258],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fKTk-0m3bIETbGKE1zjWlpyVJwMxK78SeSCg2PVcFGjM":-1},"/nuxt/ui/4847"]