Popover styles not pulling through from UNavigationMenu #5305
Description
Environment
"nuxt": "^4.1.3",
"@nuxt/ui": "4.0.1",
Is this bug related to Nuxt or Vue?
Nuxt
Package
v4.x
Version
v4.0.1
Reproduction
<UDashboardGroup unit="rem">
<UDashboardSidebar
id="default"
v-model:open="isOpen"
v-model:collapsed="isCollapsed"
collapsible
resizable
:min-size="16"
:default-size="18"
:max-size="20"
:collapsed-size="0"
class="bg-[var(--sidebar-background)]"
:class="isCollapsed ? 'w-20' : 'w-64'"
:ui="{
body: 'px-0',
header: 'h-24! max-h-30! items-start mt-4',
footer: 'lg:border-t lg:border-default',
content: 'bg-[var(--sidebar-background)]!',
}"
>
<template #default="{ collapsed }">
<UNavigationMenu
:collapsed="collapsed"
:items="menuLinks"
orientation="vertical"
variant="link"
tooltip
:popover="{
mode: 'click', // <— make flyout open on click
arrow: { width: 26, height: 20 },
content: { side: 'right', align: 'start', sideOffset: 20, alignOffset: 2 },
ui: {
content: '!bg-red-500',
arrow: '!fill-[#FFFF00]',
},
}"
:ui="navigationMenuUI"
/>
</template>
</UDashboardSidebar>
<div
class="relative flex flex-col min-w-0 min-h-svh lg:not-last:border-e lg:not-last:border-default flex-1"
>
<AppHeader :breadcrumbs="breadcrumbs" />
<div :class="hasAside ? 'lg:grid lg:grid-cols-[18rem_1fr]' : ''">
<aside
v-if="hasAside"
class="p-4 sm:p-6 border-b border-default lg:sticky lg:top-0 lg:h-svh lg:overflow-y-auto lg:border-b-0 lg:border-e"
>
<slot name="aside" />
</aside>
<div
class="flex flex-col gap-4 sm:gap-6 flex-1 overflow-y-auto p-4 sm:p-6 bg-muted"
>
<UContainer class="py-8" :class="{ 'min-w-full': fullWidth }">
<slot />
</UContainer>
</div>
</div>
</div>
</UDashboardGroup>
Description
We're trying to style the popover used in the main nav of our app.
When passing props through to the popover from UNavigationMenu nothing to do with classes appears to pull through.
<UNavigationMenu
:collapsed="collapsed"
:items="menuLinks"
orientation="vertical"
variant="link"
tooltip
:popover="{
mode: 'click', // <— make flyout open on click
arrow: { width: 26, height: 20 },
content: { side: 'right', align: 'start', sideOffset: 20, alignOffset: 2 },
ui: {
content: '!bg-red-500',
arrow: '!fill-[#FFFF00]',
},
}"
:ui="navigationMenuUI"
/>
I've tried passing the styling through as part of the main :ui prop and as part of the :ui for popover but nothing works. The size of the arrow works but nothing to do with classes.
I'm able to produce a css file to style this but then that would become global and most of our other popovers on the site would have different styling.
Additional context
No response