\n\nIt can be worked around using `item-label` slot, but it would be nice if developer can use `items` props only to implement it for simpler way.\n\nBelow, I have tried to create it using Reka UI `combobox` component, the component used by SelectMenu.\n\n\u003Cimg width=\"329\" height=\"460\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/e5cda771-3f8e-4369-bb3b-d5159f84d425\" />\n\n### Additional context\n\n_No response_",[3151,3154,3157],{"name":3152,"color":3153},"enhancement","a2eeef",{"name":3155,"color":3156},"v3","49DCB8",{"name":3158,"color":3159},"triage","ffffff",4661,"nuxt","ui","open","SelectMenu: add description props to show text below title","2025-08-06T02:19:32Z","https://github.com/nuxt/ui/issues/4661",0.7270304,{"description":3169,"labels":3170,"number":3174,"owner":3161,"repository":3162,"state":3163,"title":3175,"updated_at":3176,"url":3177,"score":3178},"### Description\n\n\u003Cimg width=\"1132\" height=\"641\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/b31830a1-49d8-41e8-bd98-77fa43191d84\" />\n\n\n## Summary\nI would like to request the addition of a `header` slot to the Accordion component in Nuxt UI. This would provide more flexibility for customizing the accordion header content beyond the current available slots.\n\n## Current Behavior\nThe Accordion component currently supports the following slots:\n- `body`\n- `content` \n- `default`\n- `leading`\n- `trailing`\n\n## Proposed Enhancement\nAdd a new `header` slot that allows developers to completely customize the header content of each accordion item.\n\n## Use Case\nI need to display additional information in the accordion title when it's in a collapsed state. The current slots (`leading`, `trailing`) provide some customization, but a dedicated `header` slot would allow for more complex layouts and better control over the entire header area.\n\nFor example, I want to show:\n- Custom formatted titles\n- Additional metadata or status indicators\n- Complex layouts that go beyond simple leading/trailing elements\n\n## Implementation Suggestion\nMy idea is to position the `header` slot **below the existing header area** as a supplementary display zone. This would:\n- Preserve the current header functionality (title, leading/trailing slots, toggle button)\n- Add an additional customizable area underneath for extra information\n- Maintain visual hierarchy while providing more space for content\n\n## Expected API\n```vue\n\u003CUAccordion :items=\"items\">\n\u003Ctemplate #header=\"{ item, index, open }\">\n \u003Cdiv class=\"supplementary-header-info\">\n \u003Cspan class=\"status-badge\">{{ item.status }}\u003C/span>\n \u003Cp class=\"description\">{{ item.summary }}\u003C/p>\n \u003C/div>\n\u003C/template>\n\u003C/UAccordion>\n```\n\n**Visual Layout:**\n```\n┌─────────────────────────────────────┐\n│ [Leading] Title Text [Trailing] ▼│ ← Existing header\n├─────────────────────────────────────┤\n│ Custom Header Slot Content │ ← New header slot\n└─────────────────────────────────────┘\n```\n\n## Benefits\n1. **Enhanced Flexibility**: Developers can create more sophisticated header layouts\n2. **Better UX**: Ability to show contextual information when accordion items are collapsed\n3. **Consistency**: Aligns with the existing slot-based architecture of other Nuxt UI components\n4. **Backward Compatibility**: Would not break existing implementations\n5. **Non-intrusive**: Positioned below existing header, maintaining current functionality\n\n## Additional Context\nThis feature would be particularly useful for:\n- Dashboard interfaces where accordion headers need to show status information\n- Form sections that display validation states in headers\n- Data tables collapsed into accordion format with summary information\n- Preview content or metadata display without expanding the full accordion\n\nThank you for considering this enhancement!\n\n### Additional context\n\n_No response_",[3171,3172,3173],{"name":3152,"color":3153},{"name":3155,"color":3156},{"name":3158,"color":3159},4782,"Feature Request: Add Header Slot to Accordion Component","2025-08-21T18:07:41Z","https://github.com/nuxt/ui/issues/4782",0.75702024,{"description":3180,"labels":3181,"number":3185,"owner":3161,"repository":3162,"state":3163,"title":3186,"updated_at":3187,"url":3188,"score":3189},"### Description\n\nI've used [Quasar's tree-component with checkboxes](https://quasar.dev/vue-components/tree#tick-strategy) as a form element in several use-cases. It's an extremely useful element for hierarchical content when it makes sense that the user is able to see all options simultaneously (i.e. not hidden in a dropdown or something similar).\n\nI can see that this component variant is mentioned on [Reka-ui's docs page](https://reka-ui.com/docs/components/tree#with-checkbox).\n\nAre there any plans to add this?\n\n### Additional context\n\n_No response_",[3182,3183,3184],{"name":3152,"color":3153},{"name":3155,"color":3156},{"name":3158,"color":3159},4243,"UTree with checkboxes","2025-05-28T13:19:10Z","https://github.com/nuxt/ui/issues/4243",0.7654677,{"description":3191,"labels":3192,"number":3196,"owner":3161,"repository":3162,"state":3163,"title":3197,"updated_at":3198,"url":3199,"score":3200},"### Description\n\nFor [SelectMenu](https://ui.nuxt.com/components/select-menu) seems to be no option to customize the label of the selected item, e.g. use multiple values to compose the label. Currently only one item value can be selected by prop `labelKey`, but it is not possible to use multiple values OR to even add custom html-code.\n\n**Example:**\n\n```ts\nconst items = [\n {\n id: 1,\n firstName: 'Max',\n lastName: 'Mustermann',\n },\n ...\n]\n```\n\nThe items to select can be fully customized, even with custom html code:\n\n```vue\n\u003Ctemplate #item-label=\"{ item }\">\n {{ item.firstName }} \u003Cspan class=\"text-highlighted\">{{ item.lastName}}\u003C/span>\n \u003Cdiv class=\"text-xs text-muted\">#{{ item.customerId }}\u003C/div>\n\u003C/template>\n```\n\nBut when an item is selected, the selected item can only be one value:\n\n```vue\n\u003CUSelectMenu label-key=\"lastName\" />\n```\n\n**Possible solutions:**\n\n1. Make a new label prop that accepts a function, so values can be compound:\n\n```ts\n\u003CUSelectMenu :label=\"(item) => item.firstName + ' ' + item.lastName\"\n```\n\n2. Optionally make a slot to customize the labels: \n```vue\n\u003CUSelectMenu>\n \u003Ctemplate #label=\"{ item }\">\n {{ item.firstName }} \u003Cspan class=\"text-highlighted\">{{ item.lastName}}\u003C/span>\n \u003Cspan class=\"text-xs text-muted\">#{{ item.customerId }}\u003C/span>\n \u003C/template>\n\u003C/USelectMenu>\n```\n\nP.S. the prop `labelKey` is not documented https://ui.nuxt.com/components/select-menu#props\n",[3193,3194,3195],{"name":3152,"color":3153},{"name":3155,"color":3156},{"name":3158,"color":3159},4581,"SelectMenu: Compound label","2025-07-23T16:38:06Z","https://github.com/nuxt/ui/issues/4581",0.77178353,{"description":3202,"labels":3203,"number":3209,"owner":3161,"repository":3162,"state":3210,"title":3211,"updated_at":3212,"url":3213,"score":3214},"### Description\n\nHello there\nCurrently, \u003CUSelect /> and \u003CUSelectMenu /> components render options within a fixed-height dropdown. It is complicated to deal with large datasets. When displaying large lists of options, this can lead to performance issues. Is it possible we can get something like VueUse infinite scroll?\n[https://vueuse.org/core/useinfinitescroll/#useinfinitescroll](url) ??\n\n### Additional context\n\n_No response_",[3204,3207,3208],{"name":3205,"color":3206},"duplicate","cfd3d7",{"name":3152,"color":3153},{"name":3155,"color":3156},4172,"closed","Uselect and UselectMenu content infinite scroll","2025-05-23T13:55:50Z","https://github.com/nuxt/ui/issues/4172",0.7451464,{"description":3216,"labels":3217,"number":3221,"owner":3161,"repository":3162,"state":3210,"title":3222,"updated_at":3223,"url":3224,"score":3225},"### Description\n\nThe [popover](https://ui.nuxt.com/components/popover) uses the content of the default slot to create a trigger, but there is no way to provide a custom anchor. A `\u003Ctemplate #anchor>` slot for this purpose would be great.\n\n```html\n\u003CUFormField label=\"name\" name=\"name\">\n \u003CUPopover :open=\"isAutoCompleteOpen\">\n \u003Ctemplate #anchor>\n \u003CUInput v-model=\"state.name\" />\n \u003C/template>\n \u003Ctemplate #content>\n \u003CPlaceholder class=\"size-48 m-4 inline-flex\" />\n \u003C/template>\n \u003C/UPopover>\n\u003C/UFormField>\n```\n\nMy use case is building an autocomplete for a text input. The `InputMenu` is not suitable because the dropdown is too intrusive.\n\n### Additional context\n\n_No response_",[3218,3219,3220],{"name":3152,"color":3153},{"name":3155,"color":3156},{"name":3158,"color":3159},4013,"Add ability to provide an anchor for the popover","2025-05-22T15:04:18Z","https://github.com/nuxt/ui/issues/4013",0.748594,{"description":3227,"labels":3228,"number":3236,"owner":3161,"repository":3162,"state":3210,"title":3237,"updated_at":3238,"url":3239,"score":3240},"### For what version of Nuxt UI are you suggesting this?\n\nv2.x\n\n### Description\n\nHi I would like to have within the component UselectMenu emit the event \"scroll\" \nwith the following properties: \n```\n{\n target: HTMLElement, \n currentTarget: HTMLElement, \n scrollTop: number,\n scrollHeight: number, \n clientHeight: number, \n}\n```\n\n to dynamically remote search items through an api and append it dynamically to my USelectMenu to create an infinite scroll. \n\nThis feature would be great in both version :)\n\n### Additional context\n\n_No response_",[3229,3230,3231,3234],{"name":3152,"color":3153},{"name":3158,"color":3159},{"name":3232,"color":3233},"closed-by-bot","ededed",{"name":3235,"color":3233},"stale",2793,"add an emit \"scroll\" event for USelectMenu","2025-06-18T09:05:29Z","https://github.com/nuxt/ui/issues/2793",0.7505342,{"description":3242,"labels":3243,"number":3248,"owner":3161,"repository":3162,"state":3210,"title":3249,"updated_at":3250,"url":3251,"score":3252},"### Description\n\nIt might be useful to add a prop to limit the maximum number of items that can be selected in a CheckboxGroup or MultiSelect. \nOnce the limit is reached, the remaining items become disabled, preventing further selection.\n\n### Additional context\n\n_No response_",[3244,3245,3246,3247],{"name":3152,"color":3153},{"name":3155,"color":3156},{"name":3232,"color":3233},{"name":3235,"color":3233},4057,"Add a selectionLimit prop to CheckboxGroup and MultiSelect components","2025-08-20T02:08:49Z","https://github.com/nuxt/ui/issues/4057",0.7587274,{"description":3254,"labels":3255,"number":3260,"owner":3161,"repository":3162,"state":3210,"title":3261,"updated_at":3262,"url":3263,"score":3264},"### Package\n\nv4.0.0-alpha.x\n\n### Description\n\nIt would be nice if the docs [ThemePicker](https://github.com/nuxt/ui/tree/v4/docs/app/components/theme-picker) component became part of NuxtUI directly. If this is something that would be accepted, I can work on creating a pull request.\n\n### Additional context\n\n_No response_",[3256,3257,3258],{"name":3152,"color":3153},{"name":3158,"color":3159},{"name":3259,"color":3156},"v4",4960,"Provide ThemePicker component","2025-09-12T19:45:22Z","https://github.com/nuxt/ui/issues/4960",0.7595591,{"description":3266,"labels":3267,"number":3271,"owner":3161,"repository":3162,"state":3210,"title":3272,"updated_at":3273,"url":3274,"score":3275},"### 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```",[3268,3269,3270],{"name":3152,"color":3153},{"name":3155,"color":3156},{"name":3158,"color":3159},4050,"NavigationMenu has no way to apply a tooltip.","2025-05-10T11:36:41Z","https://github.com/nuxt/ui/issues/4050",0.7603737,["Reactive",3277],{},["Set"],["ShallowReactive",3280],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f9tDsI-GjYq16oX4gQ-BTercHosVh9QJNC5rE_s0iRO4":-1},"/nuxt/ui/4069"]