Skip to content

UNavigationMenu dropdown width issue inside UHeader #6409

@HyunEon

Description

@HyunEon

Package

v4.x

Description

Hi there, I'm not sure if this is a bug or intended behavior, so I'm posting here..

When placing a UNavigationMenu with children inside the UHeader's default slot, the dropdown width becomes too narrow and truncates the child labels.

Is there a any recommended way to fix this?

Image
const items = computed<NavigationMenuItem[]>(() => [
  {
    label: 'Home',
    to: '/',
    active: route.path === '/',
  },
  {
    label: 'Assets',
    to: '/assets/dashboard',
    active: route.path.startsWith('/assets'),
    children: [
      {
        label: 'Dashboard',
        description: '',
        to: '/assets/dashboard',
        active: route.path === '/assets/dashboard'
      },
      {
        label: 'Request',
        to: '/assets/request',
        active: route.path === '/assets/request'
      },
    ],
  },
])

<template>
  <UHeader>
    <UNavigationMenu :items="items"  />
  </UHeader>
</template>

Metadata

Metadata

Assignees

No one assigned

    Labels

    questionFurther information is requestedv4#4488

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions