\n```\n\nIt will always render as:\n\n```html\n\u003Cnav aria-label=\"Main\">\n```\n\n**Issue:** If you need distinct ARIA labels (e.g., Admin, Footer, Header menus), you can’t target them individually because the component forces `aria-label=\"Main\"` on its root `\u003Cnav>`.\n\n## Workaround\n\nWrap the component in your own `\u003Cnav>` and change the rendered element of `UNavigationMenu` to a non-`nav` container using `as=\"div\"`:\n\n```vue\n\u003Cnav aria-label=\"Main site navigation\">\n \u003CUNavigationMenu\n as=\"div\"\n :items=\"navLinks\"\n />\n\u003C/nav>\n```\n\nThis outputs a single correctly labeled `\u003Cnav>` while avoiding multiple nested `\u003Cnav>` elements.\n\n## Trade‑offs\n\n- ✅ Correct, custom ARIA label on the outer `\u003Cnav>`.\n- ⚠️ Adds one extra wrapper element (your `\u003Cnav>`), since `UNavigationMenu` itself is no longer the `\u003Cnav>`.\n\n## Notes\n\nIf there’s an official prop added in a future release to override the internal `aria-label`, you could switch back to a single component without the wrapper.\n\n\n\n### Additional context\n\n_No response_",[3171,3174],{"name":3172,"color":3173},"enhancement","a2eeef",{"name":3175,"color":3176},"triage","ffffff",5141,"nuxt","ui","open","UNavigationMenu ARIA Label Override","2025-10-04T21:41:29Z","https://github.com/nuxt/ui/issues/5141",0.73222435,{"description":3186,"labels":3187,"number":3194,"owner":3178,"repository":3179,"state":3180,"title":3195,"updated_at":3196,"url":3197,"score":3198},"### Description\n\nHi folks\n\nWhen I have nested children in my navigation bar and I toggle the compact button, the first-level child appears as a popup, but the second-level child does not. how to make it work ?\n\nNot compact sidebar\n\u003Cimg width=\"226\" height=\"448\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/bd97efbc-36a0-43af-9cb8-1012da4e2bb7\" />\n\nCompact sidebar upon hovering\n\n\u003Cimg width=\"278\" height=\"458\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/df602a26-f92e-42d6-a346-67e0cefbe251\" />\n\n\u003CUNavigationMenu\n :items=\"MENU_ITEMS\"\n :collapsed=\"isToggle\"\n tooltip\n popover\n orientation=\"vertical\"\n :unmount-on-hide=\"false\"\n class=\"overflow-y-auto custom-scrollbar px-2 py-2 flex-2\"\n >\n \u003C/UNavigationMenu>\n\nheres my MENU ITEMS:\nexport const MENU_ITEMS: NavigationMenuItem[] = [\n { label: 'Navigation', type: 'label' },\n {\n label: 'Transaction',\n icon: 'i-material-symbols:inventory',\n children: [\n {\n label: 'GL POS Sales Amount',\n icon: 'i-material-symbols:article-shortcut-outline',\n children: [\n {\n label: 'Process',\n icon: 'uim:process',\n to: '/pos-gl',\n },\n ],\n },\n {\n label: 'GL POS Sales Quantity',\n icon: 'i-material-symbols:inventory',\n children: [\n {\n label: 'Process',\n icon: 'uim:process',\n to: '/pos-inventory',\n },\n ],\n },\n {\n label: 'Purchase Order',\n icon: 'i-icon-park-outline:order',\n children: [\n {\n label: 'Load',\n icon: 'material-symbols:database',\n to: '/purchase-order/load',\n },\n {\n label: 'Process',\n icon: 'uim:process',\n to: '/purchase-order/process',\n },\n ],\n },\n {\n label: 'PO Receiving',\n icon: 'i-cuida:box-outline',\n children: [\n {\n label: 'Load',\n icon: 'material-symbols:database',\n to: '/po-receiving/load',\n },\n {\n label: 'Process',\n icon: 'uim:process',\n to: '/po-receiving/process',\n },\n ],\n },\n {\n label: 'AP Invoice',\n icon: 'i-hugeicons:invoice-02',\n children: [\n {\n label: 'Load',\n icon: 'material-symbols:database',\n to: '/ap-invoice/load',\n },\n {\n label: 'Process',\n icon: 'uim:process',\n to: '/ap-invoice/process',\n },\n ],\n },\n {\n label: 'AP Payment',\n icon: 'i-hugeicons:payment-01',\n children: [\n {\n label: 'Load',\n icon: 'material-symbols:database',\n to: '/ap-payment/load',\n },\n {\n label: 'Process',\n icon: 'uim:process',\n to: '/ap-payment/process',\n },\n ],\n },\n ],\n },\n ],\n },\n];\n\n\n\nThank you nuxt ui fam.\n\n",[3188,3191],{"name":3189,"color":3190},"question","d876e3",{"name":3192,"color":3193},"v3","49DCB8",4543,"[UNavigationMenuBar] nested child pop up not appearing","2025-07-17T03:18:41Z","https://github.com/nuxt/ui/issues/4543",0.7467859,{"description":3200,"labels":3201,"number":3204,"owner":3178,"repository":3179,"state":3180,"title":3205,"updated_at":3206,"url":3207,"score":3208},"### 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 }\n }\"\n tooltip\n popover\n/>\n```",[3202,3203],{"name":3189,"color":3190},{"name":3192,"color":3193},4849,"Can `UNavigationMenu` support active styles via the ui prop?","2025-09-18T14:23:37Z","https://github.com/nuxt/ui/issues/4849",0.7473621,{"description":3210,"labels":3211,"number":3215,"owner":3178,"repository":3179,"state":3180,"title":3216,"updated_at":3217,"url":3218,"score":3219},"### Description\n\nUsing `\u003CUNavigationMenu>` it adds an external icon when prop `to` is an external link: \n\n\u003Cimg width=\"196\" height=\"69\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/e7417d54-ca16-48c2-9992-a54a9bed764d\" />\n\nUnfortunately, `UButton` and `ULink` 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_",[3212,3213,3214],{"name":3172,"color":3173},{"name":3192,"color":3193},{"name":3175,"color":3176},4501,"Add external icon option to UButton and ULink","2025-10-05T15:27:43Z","https://github.com/nuxt/ui/issues/4501",0.7615227,{"description":3221,"labels":3222,"number":3226,"owner":3178,"repository":3179,"state":3227,"title":3228,"updated_at":3229,"url":3230,"score":3231},"### 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_",[3223,3224,3225],{"name":3172,"color":3173},{"name":3192,"color":3193},{"name":3175,"color":3176},4072,"closed","NavigationMenu implement Accordion multiple attribute","2025-05-20T14:47:06Z","https://github.com/nuxt/ui/issues/4072",0.7303264,{"description":3233,"labels":3234,"number":3238,"owner":3178,"repository":3179,"state":3227,"title":3239,"updated_at":3240,"url":3241,"score":3242},"### 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```",[3235,3236,3237],{"name":3172,"color":3173},{"name":3192,"color":3193},{"name":3175,"color":3176},4050,"NavigationMenu has no way to apply a tooltip.","2025-05-10T11:36:41Z","https://github.com/nuxt/ui/issues/4050",0.7391455,{"description":3244,"labels":3245,"number":3249,"owner":3178,"repository":3179,"state":3227,"title":3250,"updated_at":3251,"url":3252,"score":3253},"### 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_",[3246,3247,3248],{"name":3172,"color":3173},{"name":3192,"color":3193},{"name":3175,"color":3176},3353,"NavigationMenu: Option to enable collapsible with collapsed prop","2025-05-10T15:51:54Z","https://github.com/nuxt/ui/issues/3353",0.74449235,{"description":3255,"labels":3256,"number":3268,"owner":3178,"repository":3179,"state":3227,"title":3269,"updated_at":3270,"url":3271,"score":3272},"### Description\n\nIt would be cool to be able to create an SEO-friendly NavigationMenu on mobile that appears when a button is clicked in the Slideover or Drawer components. However, the problem is that the menu component itself has the unmount-on-hide property, which makes it SEO-friendly, whereas the Slideover or Drawer where I would like to place this menu do not.\n\n### Additional context\n\n_No response_",[3257,3258,3259,3260,3263,3266],{"name":3172,"color":3173},{"name":3192,"color":3193},{"name":3175,"color":3176},{"name":3261,"color":3262},"upstream/reka-ui","56d799",{"name":3264,"color":3265},"closed-by-bot","ededed",{"name":3267,"color":3265},"stale",3622,"unmount-on-hide for Drawer, Slideover","2025-09-03T02:01:08Z","https://github.com/nuxt/ui/issues/3622",0.745875,{"description":3274,"labels":3275,"number":3279,"owner":3178,"repository":3179,"state":3227,"title":3280,"updated_at":3281,"url":3282,"score":3283},"### 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_",[3276,3277,3278],{"name":3172,"color":3173},{"name":3192,"color":3193},{"name":3175,"color":3176},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.74822146,{"description":3285,"labels":3286,"number":3289,"owner":3178,"repository":3179,"state":3227,"title":3290,"updated_at":3291,"url":3292,"score":3293},"### 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```",[3287,3288],{"name":3189,"color":3190},{"name":3192,"color":3193},3517,"How To Style NavigationMenu items","2025-05-10T11:36:22Z","https://github.com/nuxt/ui/issues/3517",0.7510789,["Reactive",3295],{},["Set"],["ShallowReactive",3298],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$feWbLhj1HopFJXTMzDh5lj9Wg1R-Q6nw7GWDG3cyAtjA":-1},"/nuxt/ui/5092"]