\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",[3165,3168],{"name":3166,"color":3167},"question","d876e3",{"name":3152,"color":3153},4616,"custom content slot in vertical orientation NavigationMenu","2025-07-28T05:42:41Z","https://github.com/nuxt/ui/issues/4616",0.7712343,{"description":3175,"labels":3176,"number":3182,"owner":3138,"repository":3139,"state":3140,"title":3183,"updated_at":3184,"url":3185,"score":3186},"### Description\n\nWhen using the Nuxt UI Drawer, if you press and hold on the content inside the drawer (not the top drag handle), the drawer starts to \"jump\" or flicker as if it's trying to close or collapse — but it doesn't fully do so. It feels like it's responding to a drag gesture, even though you're not interacting with the handle.\n\nThis issue is also reproducible on the official ui.nuxt.com site.\n\nSteps to reproduce\n\n1. Open a Drawer that contains content (text, divs, etc.).\n\n2. Click and hold anywhere on the content (not the drag handle at the top).\n\n3. Slightly drag or move your finger/mouse.\n\n4. The drawer begins to flicker or \"jerk\" as if it's trying to collapse.\n\n5. If there's a horizontal scroll inside the drawer, its width may flicker or resize as well.\n\nExpected behavior\nThe drawer should remain stable unless the user explicitly interacts with the drag handle. Content interaction shouldn't trigger drawer behavior.\n\nAdditional context\nThis seems to happen only when dragging or holding on the content area, which suggests that the gesture might be incorrectly triggering the drawer's collapse logic.\n\nDoes anyone know how to fix or work around this?\nMaybe there's a way to prevent gesture events from propagating to the drawer when interacting with content? Or should we explicitly block drag/touch events inside the drawer body?\n\nAny insights would be appreciated!\n\n\u003Cimg width=\"448\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/886dd0aa-d153-4fae-aa82-65143d38ee59\" />",[3177,3180,3181],{"name":3178,"color":3179},"bug","d73a4a",{"name":3152,"color":3153},{"name":3155,"color":3156},3947,"Unexpected drawer behavior when dragging content area (jumpy collapse & horizontal scroll flickering)","2025-06-05T10:38:05Z","https://github.com/nuxt/ui/issues/3947",0.77953243,{"description":3188,"labels":3189,"number":3192,"owner":3138,"repository":3139,"state":3140,"title":3193,"updated_at":3194,"url":3195,"score":3196},"### 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",[3190,3191],{"name":3166,"color":3167},{"name":3152,"color":3153},4543,"[UNavigationMenuBar] nested child pop up not appearing","2025-07-17T03:18:41Z","https://github.com/nuxt/ui/issues/4543",0.78117925,{"description":3198,"labels":3199,"number":3201,"owner":3138,"repository":3139,"state":3140,"title":3202,"updated_at":3203,"url":3204,"score":3205},"### 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```",[3200],{"name":3166,"color":3167},4849,"Can `UNavigationMenu` support active styles via the ui prop?","2025-08-30T10:29:01Z","https://github.com/nuxt/ui/issues/4849",0.7821063,{"description":3207,"labels":3208,"number":3214,"owner":3138,"repository":3139,"state":3215,"title":3216,"updated_at":3217,"url":3218,"score":3219},"### 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_",[3209,3210,3211],{"name":3149,"color":3150},{"name":3152,"color":3153},{"name":3212,"color":3213},"triage","ffffff",4186,"closed","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.75185865,{"description":3221,"labels":3222,"number":3226,"owner":3138,"repository":3139,"state":3215,"title":3227,"updated_at":3228,"url":3229,"score":3230},"### 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":3149,"color":3150},{"name":3152,"color":3153},{"name":3212,"color":3213},4072,"NavigationMenu implement Accordion multiple attribute","2025-05-20T14:47:06Z","https://github.com/nuxt/ui/issues/4072",0.7581604,{"description":3232,"labels":3233,"number":3237,"owner":3138,"repository":3139,"state":3215,"title":3238,"updated_at":3239,"url":3240,"score":3241},"### 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```",[3234,3235,3236],{"name":3149,"color":3150},{"name":3152,"color":3153},{"name":3212,"color":3213},4050,"NavigationMenu has no way to apply a tooltip.","2025-05-10T11:36:41Z","https://github.com/nuxt/ui/issues/4050",0.7606206,{"description":3243,"labels":3244,"number":3248,"owner":3138,"repository":3139,"state":3215,"title":3249,"updated_at":3250,"url":3251,"score":3252},"### 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```",[3245,3246,3247],{"name":3178,"color":3179},{"name":3152,"color":3153},{"name":3212,"color":3213},3911,"[NavigationMenu] Vertical menu with children doesn't respect parent Link attributes.","2025-05-10T15:51:54Z","https://github.com/nuxt/ui/issues/3911",0.76311976,["Reactive",3254],{},["Set"],["ShallowReactive",3257],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fixbCjDYiZeUMz8827HU2WVagA5jeqg_PnlvzrdN98jk":-1},"/nuxt/ui/3622"]