N
Nuxt•4mo ago
Uchuu

NuxtUI - why are the children of this nav item so wide?

<template>
  <UContainer class="py-10">
    <!-- TODO: Add the icon at some point -->
    <div class="p-1.5">
      <h1 class="text-black text-3xl font-bold">W8R</h1>
    </div>
    <UNavigationMenu :items="items" class="w-full" />
  </UContainer>

  <slot />

</template>
<template>
  <UContainer class="py-10">
    <!-- TODO: Add the icon at some point -->
    <div class="p-1.5">
      <h1 class="text-black text-3xl font-bold">W8R</h1>
    </div>
    <UNavigationMenu :items="items" class="w-full" />
  </UContainer>

  <slot />

</template>
No description
2 Replies
kapa.ai
kapa.ai•4mo ago
Hi @Uchuu. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the code snippet you've shared, the children of your navigation menu items might appear too wide because you're applying class="w-full" to the UNavigationMenu component without additional styling to control the width of the dropdown content. By default, the NavigationMenu component in Nuxt UI will expand its children to match the available width. Here are a few ways to address this: 1. Customize the viewport and content width You can customize the width of the dropdown content by adding UI customizations: 
<UNavigationMenu 
  :items="items" 
  class="w-full" 
  :ui="{
    viewport: 'sm:w-auto',
    content: 'sm:w-auto',
    childList: 'sm:w-64' // Adjust this value to your preferred width
  }"
/>
<UNavigationMenu 
  :items="items" 
  class="w-full" 
  :ui="{
    viewport: 'sm:w-auto',
    content: 'sm:w-auto',
    childList: 'sm:w-64' // Adjust this value to your preferred width
  }"
/>
2. Use the content-orientation prop If you're using a horizontal navigation menu, you can control the orientation of the dropdown content: 
<UNavigationMenu 
  :items="items" 
  class="w-full" 
  content-orientation="vertical"
/>
<UNavigationMenu 
  :items="items" 
  class="w-full" 
  content-orientation="vertical"
/>
3. Apply custom classes As shown in the NavigationMenu documentation, you can apply custom classes to control the width: 
<UNavigationMenu 
  :items="items" 
  class="w-full" 
  :ui="{
    childList: 'sm:w-96',
    childLinkDescription: 'text-balance line-clamp-2'
  }"
/>
<UNavigationMenu 
  :items="items" 
  class="w-full" 
  :ui="{
    childList: 'sm:w-96',
    childLinkDescription: 'text-balance line-clamp-2'
  }"
/>
The childList class specifically controls the width of the dropdown menu items. If you need more control, you can also use custom slots to completely customize the content appearance as shown in the With content slot documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•4mo ago
<@1035470271441805353> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?