\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_",[3166,3167,3170],{"name":3152,"color":3153},{"name":3168,"color":3169},"v3","49DCB8",{"name":3155,"color":3156},4501,"Add external icon option to UButton and ULink","2025-07-11T09:39:53Z","https://github.com/nuxt/ui/issues/4501",0.7546708,{"description":3177,"labels":3178,"number":3182,"owner":3141,"repository":3158,"state":3143,"title":3183,"updated_at":3184,"url":3185,"score":3186},"### 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```",[3179],{"name":3180,"color":3181},"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.75732625,{"description":3188,"labels":3189,"number":3193,"owner":3141,"repository":3194,"state":3195,"title":3196,"updated_at":3197,"url":3198,"score":3199},"Hello,\r\n\r\n\r\n\r\nThe button on this screenshot (github, discord and twitter) does nothing and you could use X (instead of Twitter) like in footer!",[3190],{"name":3191,"color":3192},"bug","ff281a",1409,"nuxt.com","closed","Home 'Built by developers around the world.' buttons does nothing","2023-11-03T10:28:58Z","https://github.com/nuxt/nuxt.com/issues/1409",0.6970286,{"description":3201,"labels":3202,"number":3206,"owner":3141,"repository":3158,"state":3195,"title":3207,"updated_at":3208,"url":3209,"score":3210},"### Description\n\nI was looking to implement tooltip for NavigationMenu links as it was available in the DashboardSidebarLinks component in v2. But seems like the feature is no longer present in v3. \n\nhttps://ui2.nuxt.com/pro/components/dashboard-sidebar-links\n\nLet me know if there is still a simple way to implement tooltips specially in the collapsed Sidebar. I don't wanna go down with the slots approach. It looks dirty.\n\n\n\n### Additional context\n\nThis is what I have to do in order to get it to work. I believe this should be part of Nuxt UI already.\n\n``` js\n\u003CUNavigationMenu :collapsed=\"collapsed\" :items=\"links\" orientation=\"vertical\">\n \u003Ctemplate #item-leading=\"{ item }\">\n \u003CUTooltip :disabled=\"!collapsed\" :text=\"item.label\">\n \u003CUIcon\n :name=\"item.icon || ''\"\n class=\"text-dimmed group-hover:text-default size-5 shrink-0 transition-colors\"\n />\n \u003C/UTooltip>\n \u003C/template>\n\u003C/UNavigationMenu>\n```",[3203,3204,3205],{"name":3152,"color":3153},{"name":3168,"color":3169},{"name":3155,"color":3156},4050,"NavigationMenu has no way to apply a tooltip.","2025-05-10T11:36:41Z","https://github.com/nuxt/ui/issues/4050",0.7326746,{"description":3212,"labels":3213,"number":3218,"owner":3141,"repository":3158,"state":3195,"title":3219,"updated_at":3220,"url":3221,"score":3222},"### 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```",[3214,3216,3217],{"name":3191,"color":3215},"d73a4a",{"name":3168,"color":3169},{"name":3155,"color":3156},4073,"UNavigationMenu: Dropdown broken","2025-05-13T12:02:03Z","https://github.com/nuxt/ui/issues/4073",0.7432278,{"description":3224,"labels":3225,"number":3140,"owner":3141,"repository":3194,"state":3195,"title":3228,"updated_at":3229,"url":3230,"score":3147},"You can rework the default style of open dropdowns with this linked exemples :\nhttps://www.figma.com/file/OLlmzoVQ7FSBh4FJJORNpl/%F0%9F%96%A5---nuxt.com?node-id=3736%3A46251",[3226],{"name":3152,"color":3227},"1ad6ff","[Component] Dropdown improvement","2022-06-27T15:09:13Z","https://github.com/nuxt/nuxt.com/issues/708",{"description":3232,"labels":3233,"number":3241,"owner":3141,"repository":3158,"state":3195,"title":3242,"updated_at":3243,"url":3244,"score":3245},"### Description\n\n## No Clear Documentation for Targeting Active Styles in `NavigationMenu` Component\n\n### Description\n\nI'm trying to apply custom styles to the active state of a menu item in the `NavigationMenu` component, but there doesn't seem to be any clear documentation on how to do this.\n\nThe [theming docs](https://ui.nuxt.com/getting-started/theme#props) mention using the `:ui` attribute to target internal parts of a component, and the [theme structure for `NavigationMenu`](https://ui.nuxt.com/components/navigation-menu#theme) shows a large theme object. However, attempting to follow that structure often results in unexpected behavior—like rendering `[object Object]`, which suggests that it doesn't expect an object or the nested configuration isn’t being parsed correctly.\n\nEven large language models get tripped up when referencing the documentation. Some approaches I've tried (unsuccessfully) include:\n\n```js\nlink: {\n base: 'px-3 py-2 rounded-md',\n active: 'bg-primary text-white font-medium'\n},\nvariants: {\n active: {\n true: {\n item: 'bg-primary text-white font-medium'\n }\n }\n}\n```\n\nThe only working solution so far is using data-* attributes like this:\n```js\nlink: 'text-md data-active:bg-primary data-active:text-white'\n```\nWhile this works, it’s undocumented and feels fragile—it could easily break with a future update if it’s not the intended method.\n\n### Question\nWhat is the official and supported way to apply styles based on active state for subcomponents like link in NavigationMenu?",[3234,3235,3236,3239],{"name":3180,"color":3181},{"name":3168,"color":3169},{"name":3237,"color":3238},"closed-by-bot","ededed",{"name":3240,"color":3238},"stale",4279,"Targeting active menu styles","2025-08-20T02:08:31Z","https://github.com/nuxt/ui/issues/4279",0.75070214,{"description":3247,"labels":3248,"number":3254,"owner":3141,"repository":3158,"state":3195,"title":3255,"updated_at":3256,"url":3257,"score":3258},"### 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```",[3249,3250,3251,3252,3253],{"name":3191,"color":3215},{"name":3168,"color":3169},{"name":3155,"color":3156},{"name":3237,"color":3238},{"name":3240,"color":3238},4294,"Arrow Hidden When backdrop-blur Is Used on DropdownMenu","2025-08-20T02:08:24Z","https://github.com/nuxt/ui/issues/4294",0.7509843,["Reactive",3260],{},["Set"],["ShallowReactive",3263],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fW1Vk-MQmvjJu8ov_r-vCcaNTXAuC_FxrxmWODv8Ae1g":-1},"/nuxt/ui/2337"]