\n\n\nThis is how the new accordion will be visualized from the accessibility tree.\n\n\u003Cimg width=\"450\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/6490bbb7-d453-4516-89a1-069ff31c88e8\" />\n\nI would love to hear your opinion on this, and I would also be glad to help out if needed.\n\n\n### Additional context\n\n_No response_",[3018,3021],{"name":3019,"color":3020},"enhancement","a2eeef",{"name":3022,"color":3023},"triage","ffffff",4338,"nuxt","ui","open","Accordion a11y using details and summary","2025-06-14T18:17:05Z","https://github.com/nuxt/ui/issues/4338",0.740834,{"description":3033,"labels":3034,"number":3040,"owner":3025,"repository":3026,"state":3027,"title":3041,"updated_at":3042,"url":3043,"score":3044},"### Description\n\nIt is very non-obvious, how to customize the style of indicator in Tabs and NavigationMenu components.\nI try to change the position of indicator to top of the link when NavigationMenu is in mobile mode (sticked to the bottom of the screen), but can't figure out how to do it.\nAlso try to make the text bold and background highlighted with border around and gradient in Tabs component.\n\n### Additional context\n\n_No response_",[3035,3036,3039],{"name":3019,"color":3020},{"name":3037,"color":3038},"v3","49DCB8",{"name":3022,"color":3023},4591,"Documentation: Styling of indicator in Tabs and NavigationMenu","2025-07-24T15:51:09Z","https://github.com/nuxt/ui/issues/4591",0.7580802,{"description":3046,"labels":3047,"number":3052,"owner":3025,"repository":3026,"state":3027,"title":3053,"updated_at":3054,"url":3055,"score":3056},"### Description\n\nWhat can we do if we have to use custom content using slot in vertical orientation NavigationMenu?\n\nExample code:\n```\n\u003Ctemplate>\n \u003CUNavigationMenu\n :items=\"items\"\n orientation=\"vertical\"\n class=\"w-full justify-center\"\n >\n \u003Ctemplate #docs-content>\n \u003CDocs />\n \u003C/template>\n \u003Ctemplate #components-content>\n \u003CComponents />\n \u003C/template>\n \u003C/UNavigationMenu>\n\u003C/template>\n\n\u003Cscript setup lang=\"ts\">\nimport type { NavigationMenuItem } from '@nuxt/ui'\n\nimport Docs from '@/components/common/header/Docs.vue'\nimport Components from '@/components/common/header/Components.vue'\n\nconst items = [\n {\n label: 'Docs',\n icon: 'i-lucide-book-open',\n slot: 'docs' as const,\n },\n {\n label: 'Components',\n icon: 'i-lucide-box',\n slot: 'components' as const,\n },\n {\n label: 'GitHub',\n icon: 'i-simple-icons-github'\n }\n] satisfies NavigationMenuItem[]\n\u003C/script>\n```\n",[3048,3051],{"name":3049,"color":3050},"question","d876e3",{"name":3037,"color":3038},4616,"custom content slot in vertical orientation NavigationMenu","2025-07-28T05:42:41Z","https://github.com/nuxt/ui/issues/4616",0.75851154,{"description":3058,"labels":3059,"number":3062,"owner":3025,"repository":3026,"state":3027,"title":3063,"updated_at":3064,"url":3065,"score":3066},"### 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?",[3060,3061],{"name":3049,"color":3050},{"name":3037,"color":3038},4279,"Targeting active menu styles","2025-06-02T10:32:24Z","https://github.com/nuxt/ui/issues/4279",0.7669362,{"description":3068,"labels":3069,"number":3072,"owner":3025,"repository":3026,"state":3027,"title":3073,"updated_at":3074,"url":3075,"score":3076},"### 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.",[3070,3071],{"name":3049,"color":3050},{"name":3037,"color":3038},4254,"NavigationMenu transitions/animations on toggle collapsed state","2025-05-29T21:37:50Z","https://github.com/nuxt/ui/issues/4254",0.76924616,{"description":3078,"labels":3079,"number":3085,"owner":3025,"repository":3026,"state":3086,"title":3087,"updated_at":3088,"url":3089,"score":3090},"### Environment\n\n\n\n- Operating System: Darwin\n- Node Version: v23.9.0\n- Nuxt Version: 3.16.2\n- CLI Version: 3.24.1\n- Nitro Version: 2.11.8\n- Package Manager: npm@10.9.2\n- Builder: -\n- User Config: compatibilityDate, devtools, modules, components, css, devServer, ssr, vuefire, runtimeConfig\n- Runtime Modules: @nuxt/image@1.10.0, @nuxt/ui-pro@3.0.2, nuxt-vuefire@1.0.5\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.2\n\n### Reproduction\n\nThis is noticeable on the documentation [page](https://ui.nuxt.com/components/navigation-menu#orientation) for any vertical navigation menu with children navigation items. \n\n### Description\n\nThe parent item renders as a `\u003Cbutton>` tag instead of the `\u003Ca>` tags of other navigation menu items. This means the `to:` attribute is ignored (and target) and can't be clicked on. This is likely due to the parent and children being converted to a Collapsible component under the hood. \n\nWhen the orientation is horizontal, however, you can have both the parent and children be links - where they render `\u003Ca>` tags. Hovering over the horizontal parent shows the children, but the parent can still be a link.\n\nIdeally, we could set a boolean to control whether the children are converted to a Collapsible or not. Or wrap the Collapsible parent around a link. Understandably, the click then couldn't trigger opening/closing the collapsible (maybe the icon triggers opening/closing, while the label can still have the Link attributes available).\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3080,3083,3084],{"name":3081,"color":3082},"bug","d73a4a",{"name":3037,"color":3038},{"name":3022,"color":3023},3911,"closed","[NavigationMenu] Vertical menu with children doesn't respect parent Link attributes.","2025-05-10T15:51:54Z","https://github.com/nuxt/ui/issues/3911",0.7189104,{"description":3092,"labels":3093,"number":3097,"owner":3025,"repository":3026,"state":3086,"title":3098,"updated_at":3099,"url":3100,"score":3101},"### Environment\n\n- Operating System: Linux\n- Node Version: v20.12.0\n- Nuxt Version: 3.17.3\n- CLI Version: 3.25.1\n- Nitro Version: 2.11.12\n- Package Manager: pnpm@8.15.6\n- Builder: -\n- User Config: modules, devtools, compatibilityDate, future, css\n- Runtime Modules: @nuxt/ui@3.1.3\n- Build Modules: -\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/admiring-firefly-pw9d9p\n\n### Description\n\nUsing a vertical orientation along with `type=\"single\"`, if there is only one level of children, works great. Clicking on another item to select causes the current item to collapse and new one expands.\n\nWhen you have more nested levels though, clicking on child items bubbles up and closes all parents up to top.\n\nI've added two `UNavigationMenu` items, the first one has one level and works fine, the seconds one is where the issue is demonstrated.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3094,3095,3096],{"name":3081,"color":3082},{"name":3037,"color":3038},{"name":3022,"color":3023},4329,"`UNavigationMenu` nested accordions close all levels when `type=\"single\"`","2025-06-17T08:49:09Z","https://github.com/nuxt/ui/issues/4329",0.73025346,{"description":3103,"labels":3104,"number":3108,"owner":3025,"repository":3026,"state":3086,"title":3109,"updated_at":3088,"url":3110,"score":3111},"### Description\n\nIs there any chance we can get option to enable/disable collapsible when collapsed prop is true. v3.0.0-alpha.13 'fixed' NavigationMenu: disable collapsible with collapsed prop, i used nuxt ui since v3.0.0-alpha.12 and thought the collapsible when collapsed was feature.\n\n### Additional context\n\n_No response_",[3105,3106,3107],{"name":3019,"color":3020},{"name":3037,"color":3038},{"name":3022,"color":3023},3353,"NavigationMenu: Option to enable collapsible with collapsed prop","https://github.com/nuxt/ui/issues/3353",0.73240715,{"description":3113,"labels":3114,"number":3118,"owner":3025,"repository":3026,"state":3086,"title":3119,"updated_at":3120,"url":3121,"score":3122},"### 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```",[3115,3116,3117],{"name":3019,"color":3020},{"name":3037,"color":3038},{"name":3022,"color":3023},4050,"NavigationMenu has no way to apply a tooltip.","2025-05-10T11:36:41Z","https://github.com/nuxt/ui/issues/4050",0.7351112,{"description":3124,"labels":3125,"number":3128,"owner":3025,"repository":3026,"state":3086,"title":3129,"updated_at":3130,"url":3131,"score":3132},"### Description\n\nWhen using \u003CUNavigationMenu> with onSelect (instead of to), there's no way to manually set the active state on items. It would be helpful to support an active prop or a value binding (like in buttons #3417) to reflect the selected state visually.\n\n### Additional context\n\n_No response_",[3126,3127],{"name":3019,"color":3020},{"name":3037,"color":3038},4185,"Allow `active` style on `UNavigationMenu` items when using `onSelect`","2025-05-19T15:38:25Z","https://github.com/nuxt/ui/issues/4185",0.7501929,["Reactive",3134],{},["Set"],["ShallowReactive",3137],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fgfopvyopnaSaf16fOeArUWr8l8rWgAKGaSnDCDLDEek":-1},"/nuxt/ui/4072"]