\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",[3145,3148],{"name":3146,"color":3147},"question","d876e3",{"name":3149,"color":3150},"v3","49DCB8",4616,"nuxt","ui","open","custom content slot in vertical orientation NavigationMenu","2025-07-28T05:42:41Z","https://github.com/nuxt/ui/issues/4616",0.55587065,{"description":3160,"labels":3161,"number":3162,"owner":3152,"repository":3163,"state":3154,"title":3164,"updated_at":3165,"url":3166,"score":3167},"According to the [Vue-Iconify Docs](https://iconify.design/docs/icon-components/vue/transform.html#rotation) one can pass a `rotate` and `flip` Prop to transform the Icon, to display it in different orientations.\r\n\r\n```vue\r\n\u003Ctemplate>\r\n \u003CIcon name=\"ic:round-double-arrow\" size=\"26\" :rotate=\"flip && '2'\" />\r\n\u003C/template>\r\n\r\n\u003Cscript setup lang=\"ts\">\r\nconst flip = ref(false);\r\n\u003C/script>\r\n```\r\n\r\nWhile this works fine with nuxt-icon during development, it breaks in a Prod build. The transformations no longer get applied.\r\n\r\nIt would be great if nuxt-icon could also support these props, if possible. I'm open to help with this issue if someone could give me some pointers where to start.",[],138,"icon","[Feature Request] Support Iconify Transformations","2024-03-15T09:15:14Z","https://github.com/nuxt/icon/issues/138",0.7326143,{"description":3169,"labels":3170,"number":3172,"owner":3152,"repository":3153,"state":3154,"title":3173,"updated_at":3174,"url":3175,"score":3176},"### 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```",[3171],{"name":3146,"color":3147},4849,"Can `UNavigationMenu` support active styles via the ui prop?","2025-08-30T10:29:01Z","https://github.com/nuxt/ui/issues/4849",0.755158,{"description":3178,"labels":3179,"number":3183,"owner":3152,"repository":3153,"state":3154,"title":3184,"updated_at":3185,"url":3186,"score":3187},"### Package\n\nv4.0.0-alpha.x\n\n### Description\n\nHi 👋🏻 \n\nI was implementing and migrating my starter kit to Nuxt UI v4 when I noticed that Nuxt provides a `UMain` component that is also used in its documentation. According to the semantic HTML structure, app navigation should not be placed inside the `main` container. For instance, [this](https://code-basics.com/languages/html/lessons/aside) is an example of how to use an aside.\n\n\u003Cimg width=\"1508\" height=\"819\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/971b117f-c056-4106-8670-6fcbbc13b286\" />\n\nAs a result, we may need to update the layout and how the banner component is used.\n\nI apologise for any inconvenience caused by design decisions, but we are committed to creating the best Nuxt UI framework possible. 😊 \n\nLet me know your thoughts on it.",[3180,3181],{"name":3146,"color":3147},{"name":3182,"color":3150},"v4",4955,"[Discussion] As per the Semantic HTML structure navigation \u003Caside> should not be inside \u003Cmain> tag","2025-09-12T11:19:44Z","https://github.com/nuxt/ui/issues/4955",0.7880336,{"description":3189,"labels":3190,"number":3193,"owner":3152,"repository":3153,"state":3194,"title":3195,"updated_at":3196,"url":3197,"score":3198},"### 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```",[3191,3192],{"name":3146,"color":3147},{"name":3149,"color":3150},3517,"closed","How To Style NavigationMenu items","2025-05-10T11:36:22Z","https://github.com/nuxt/ui/issues/3517",0.7400305,{"description":3200,"labels":3201,"number":3205,"owner":3152,"repository":3152,"state":3194,"title":3206,"updated_at":3207,"url":3208,"score":3209},"Hey!\r\n\r\nWith our current project, me and the team was wondering what was the reasoning behind the decision to not support slots in layouts?\r\n\r\nWe ran into it when we realized that a CSS grid layout would work best for our responsive view, since each page knows what kind of sidebar or extra content is required in this specific case. For that the structure would need to be like this:\r\n\r\n```\r\nhtml\r\n head\r\n ...\r\n body\r\n my-header\r\n nuxt\r\n #content\r\n slot\r\n #sidebar\r\n slot(name=\"sidebar\")\r\n #extra\r\n slot(name=\"extra\")\r\n my-footer\r\n```\r\nRight now the two options we see are using a separate layout component or somehow coordinating sidebar and extra components to make their own requests according to current route, but both feel at odds with overall simplicity Nuxt aims for.\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c941\">#c941\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3202],{"name":3203,"color":3204},"2.x","d4c5f9",1079,"Why no slots in layouts?","2023-01-18T15:40:44Z","https://github.com/nuxt/nuxt/issues/1079",0.75615317,{"description":3211,"labels":3212,"number":3220,"owner":3152,"repository":3153,"state":3194,"title":3221,"updated_at":3222,"url":3223,"score":3224},"### 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_",[3213,3216,3217],{"name":3214,"color":3215},"enhancement","a2eeef",{"name":3149,"color":3150},{"name":3218,"color":3219},"triage","ffffff",4072,"NavigationMenu implement Accordion multiple attribute","2025-05-20T14:47:06Z","https://github.com/nuxt/ui/issues/4072",0.7623158,{"description":3226,"labels":3227,"number":3231,"owner":3152,"repository":3153,"state":3194,"title":3232,"updated_at":3233,"url":3234,"score":3235},"### Description\n\nI want to make the text in a custom slot for a tree item child selectable.\nThe issue is that `user-select: text` doesn’t work on `\u003Cbutton>` elements in Safari (I’m using a Tauri app).\n\nIt would be great if the component allowed using a custom slot that avoids rendering a \u003Cbutton> for certain items. (Perhaps a new slot could be added to allow custom rendering?).\n\n\u003Cimg width=\"1217\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/39cf6666-e3c9-48f4-a922-90a57d604feb\" />\n\n\n### Additional context\n\n_No response_",[3228,3229,3230],{"name":3214,"color":3215},{"name":3149,"color":3150},{"name":3218,"color":3219},4424,"Ability to not use button container for tree custom slot","2025-08-07T09:20:31Z","https://github.com/nuxt/ui/issues/4424",0.7635972,{"description":3237,"labels":3238,"number":3250,"owner":3152,"repository":3153,"state":3194,"title":3251,"updated_at":3252,"url":3253,"score":3254},"### 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_",[3239,3240,3241,3242,3245,3248],{"name":3214,"color":3215},{"name":3149,"color":3150},{"name":3218,"color":3219},{"name":3243,"color":3244},"upstream/reka-ui","56d799",{"name":3246,"color":3247},"closed-by-bot","ededed",{"name":3249,"color":3247},"stale",3622,"unmount-on-hide for Drawer, Slideover","2025-09-03T02:01:08Z","https://github.com/nuxt/ui/issues/3622",0.76792204,{"description":3256,"labels":3257,"number":3262,"owner":3152,"repository":3153,"state":3194,"title":3263,"updated_at":3264,"url":3265,"score":3266},"### 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?",[3258,3259,3260,3261],{"name":3146,"color":3147},{"name":3149,"color":3150},{"name":3246,"color":3247},{"name":3249,"color":3247},4279,"Targeting active menu styles","2025-08-20T02:08:31Z","https://github.com/nuxt/ui/issues/4279",0.76850283,["Reactive",3268],{},["Set"],["ShallowReactive",3271],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fEOERQmk5FBhPs0we7EyJzgIRg2WlfEI8dd3IczdLzMQ":-1},"/nuxt/ui/4097"]