\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_",[3050,3051,3052],{"name":3036,"color":3037},{"name":3022,"color":3023},{"name":3040,"color":3041},4501,"Add external icon option to UButton and ULink","2025-07-11T09:39:53Z","https://github.com/nuxt/ui/issues/4501",0.7353722,{"description":3059,"labels":3060,"number":3066,"owner":3025,"repository":3026,"state":3027,"title":3067,"updated_at":3068,"url":3069,"score":3070},"### 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```",[3061,3064,3065],{"name":3062,"color":3063},"bug","d73a4a",{"name":3022,"color":3023},{"name":3040,"color":3041},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.74484116,{"description":3072,"labels":3073,"number":3079,"owner":3025,"repository":3026,"state":3027,"title":3080,"updated_at":3081,"url":3082,"score":3083},"",[3074,3075,3076],{"name":3036,"color":3037},{"name":3022,"color":3023},{"name":3077,"color":3078},"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.7490995,{"description":3085,"labels":3086,"number":3089,"owner":3025,"repository":3026,"state":3027,"title":3090,"updated_at":3091,"url":3092,"score":3093},"### Description\n\nHey! Thanks for trying to make nuxt/ui even more awesome.\n\nI've been struggled with adding NavigationMenu items animation on toggling collapsed of/off states. \nI'd like to make it work smoothly and keep only icons with popovers in collapsed state and show the rest only when collapsed is off. out of the box its only toggled on/off without transitions.\nI see no option to pass slot to wrap labels with vue Transition component or use Motion-vue and either css animations like data-[collaped=true]:animate.... not working well because whole inner content of nav is wrapped with \"v-if\" and switched on collapsed. \n\nIn some components data-[state] animations works well, but not in collapsed NavigationMenu. Or am I doing something wrong?\nOnly a way I see is to override whole item slot. But for now I've just get rid of NavigationMenu and made my own custom component with fancy transitions.\nPlease point me to right direction and suggest best practices, cuz I'd like to use most of components and make it work with smooth transitions/animations, but sometimes got stucked with limitations/lack of knowledge. \n\nofftop: For example, wasted many hours trying to achieve smooth slide-down transition for table expanded rows. Ended up with expanded slot with UCollapsible plus exclusive inner state for it, changed with setTimeout(() => { ... }, 300), Ugly, hucky, but it works.",[3087,3088],{"name":3019,"color":3020},{"name":3022,"color":3023},4254,"NavigationMenu transitions/animations on toggle collapsed state","2025-05-29T21:37:50Z","https://github.com/nuxt/ui/issues/4254",0.7600983,{"description":3095,"labels":3096,"number":3099,"owner":3025,"repository":3026,"state":3100,"title":3101,"updated_at":3102,"url":3103,"score":3104},"### 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```",[3097,3098],{"name":3019,"color":3020},{"name":3022,"color":3023},3517,"closed","How To Style NavigationMenu items","2025-05-10T11:36:22Z","https://github.com/nuxt/ui/issues/3517",0.69902706,{"description":3106,"labels":3107,"number":3111,"owner":3025,"repository":3026,"state":3100,"title":3112,"updated_at":3113,"url":3114,"score":3115},"### Description\n\nNeed to have the ability to provide a callback function to onRemoveTag when selecting multiple items to be able to customize its behavior.\n\n### Additional context\n\nIn my use case for example I have an InputMenu with Multiple selections the items list contains values that fall under multiple categories for example A, B, and C with the ability to search for any of them in the same InputMenu, so the list of items looks something like this:\n- A: A1\n- A: A2\n- B: B5\n- C: C7\nthe state is then stored in a pinia store based on the category onSelect, e.g. `if (key == \"A\") store.listA.push(item.value)` when I click on the remove tag the v-model value is updated, but I have no idea which category was it from, meaning I will have to check all the items to know which state to update since they are actually separate.",[3108,3109,3110],{"name":3036,"color":3037},{"name":3022,"color":3023},{"name":3040,"color":3041},4463,"[InputMenu] ability to control behavior of onRemoveTag","2025-07-16T20:28:46Z","https://github.com/nuxt/ui/issues/4463",0.7342005,{"description":3117,"labels":3118,"number":3122,"owner":3025,"repository":3026,"state":3100,"title":3123,"updated_at":3124,"url":3125,"score":3126},"### Description\n\nHi,\n\nI believe that it would be very interesting to implement in the NavigationMenu an attribute similar to the Accordion multiple to allow to open only branch of the menu when the menu is vertical.\n\nKind regards...Antonio\n\n### Additional context\n\n_No response_",[3119,3120,3121],{"name":3036,"color":3037},{"name":3022,"color":3023},{"name":3040,"color":3041},4072,"NavigationMenu implement Accordion multiple attribute","2025-05-20T14:47:06Z","https://github.com/nuxt/ui/issues/4072",0.7387515,{"description":3128,"labels":3129,"number":3133,"owner":3025,"repository":3026,"state":3100,"title":3134,"updated_at":3135,"url":3136,"score":3137},"### Description\n\nThe UNavigationMenu component in collapsed mode provides a space-efficient navigation experience.\n\nHowever, when a navigation item has submenus, the current behavior on click is to add the submenu items with a new list of icons at the same level. This can be confusing, as it’s not immediately clear that a submenu was opened, it looks like a flat continuation of the main menu.\n\nhttps://github.com/user-attachments/assets/809d7216-d707-48a6-bfeb-d6f3f4c292a5\n\n\n👉 A potential improvement would be to show a popover menu on hover (like Stripe does) when an item with children is hovered in collapsed mode.\n\n\n\n### Additional context\n\n_No response_",[3130,3131,3132],{"name":3036,"color":3037},{"name":3022,"color":3023},{"name":3040,"color":3041},4186,"Show a popover menu on hover in `UNavigationMenu` when collapsed, for items with submenus","2025-05-21T16:39:05Z","https://github.com/nuxt/ui/issues/4186",0.74013925,["Reactive",3139],{},["Set"],["ShallowReactive",3142],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fMJobbuBjPn2nvjjemqsHDpRq4jZIAJtqk_dZ1AFeN2U":-1},"/nuxt/ui/4185"]