Children in NavigationMenu are cut off, if nested in DashboardToolbar #5439
Description
Environment
- Operating System:
Darwin - Node Version:
v22.20.0 - Nuxt Version:
4.2.1 - CLI Version:
3.30.0 - Nitro Version:
2.12.9 - Package Manager:
pnpm@10.17.1 - Builder:
- - User Config:
modules,devtools,css,content,mdc,runtimeConfig,routeRules,sourcemap,experimental,nitro,vite,eslint,i18n,plausible,robots,sanctum,sentry,sitemap,hooks - Runtime Modules:
@nuxt/eslint@1.10.0,@nuxt/ui@4.1.0,@nuxtjs/sitemap@7.4.7,@nuxt/content@3.8.0,@vueuse/nuxt@13.9.0,nuxt-auth-sanctum@1.4.2,@nuxtjs/i18n@10.1.2,nuxt-laravel-echo@0.2.9,@nuxtjs/robots@5.5.6,@nuxtjs/plausible@1.2.0,@sentry/nuxt/module@9.46.0,nuxt-seo-utils@7.0.18,@nuxt/image@1.11.0 - Build Modules:
-
Is this bug related to Nuxt or Vue?
Nuxt
Package
v4.x
Version
4.1.0
Reproduction
https://codesandbox.io/p/devbox/little-violet-pcl8yx
<script setup lang="ts">
const items = ref([
{
label: 'Guide',
icon: 'i-lucide-book-open',
to: '/docs/getting-started',
children: [
{
label: 'Introduction',
description: 'Fully styled and customizable components for Nuxt.',
icon: 'i-lucide-house'
},
{
label: 'Installation',
description: 'Learn how to install and configure Nuxt UI in your application.',
icon: 'i-lucide-cloud-download'
},
{
label: 'Icons',
icon: 'i-lucide-smile',
description: 'You have nothing to do, @nuxt/icon will handle it automatically.'
},
{
label: 'Colors',
icon: 'i-lucide-swatch-book',
description: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
},
{
label: 'Theme',
icon: 'i-lucide-cog',
description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
}
]
},
{
label: 'Composables',
icon: 'i-lucide-database',
to: '/docs/composables',
children: [
{
label: 'defineShortcuts',
icon: 'i-lucide-file-text',
description: 'Define shortcuts for your application.',
to: '/docs/composables/define-shortcuts'
},
{
label: 'useOverlay',
icon: 'i-lucide-file-text',
description: 'Display a modal/slideover within your application.',
to: '/docs/composables/use-overlay'
},
{
label: 'useToast',
icon: 'i-lucide-file-text',
description: 'Display a toast within your application.',
to: '/docs/composables/use-toast'
}
]
},
{
label: 'Components',
icon: 'i-lucide-box',
to: '/docs/components',
active: true,
children: [
{
label: 'Link',
icon: 'i-lucide-file-text',
description: 'Use NuxtLink with superpowers.',
to: '/docs/components/link'
},
{
label: 'Modal',
icon: 'i-lucide-file-text',
description: 'Display a modal within your application.',
to: '/docs/components/modal'
},
{
label: 'NavigationMenu',
icon: 'i-lucide-file-text',
description: 'Display a list of links.',
to: '/docs/components/navigation-menu'
},
{
label: 'Pagination',
icon: 'i-lucide-file-text',
description: 'Display a list of pages.',
to: '/docs/components/pagination'
},
{
label: 'Popover',
icon: 'i-lucide-file-text',
description: 'Display a non-modal dialog that floats around a trigger element.',
to: '/docs/components/popover'
},
{
label: 'Progress',
icon: 'i-lucide-file-text',
description: 'Show a horizontal bar to indicate task progression.',
to: '/docs/components/progress'
}
]
},
{
label: 'GitHub',
icon: 'i-simple-icons-github',
badge: '3.8k',
to: 'https://github.com/nuxt/ui',
target: '_blank'
},
{
label: 'Help',
icon: 'i-lucide-circle-help',
disabled: true
}
])
</script>
<template>
<UDashboardToolbar>
<UNavigationMenu :items="items" />
</UDashboardToolbar>
</template>
Description
When wrapped inside UDashboardToolbar, the children's dropdown is cut off.