N
Nuxt•2mo ago
BenG

NavigationMenu width is limited with the width of the Header content

<template>
  <UHeader
    :ui="{
      container: 'overflow-visible',
      center: 'flex items-center gap-3 flex-1 overflow-visible'
    }"
  >
    <template #left>
      
    </template>

    <UNavigationMenu
      :items="items"
      variant="link"
      :teleport="true"
      :ui="{
        viewport: 'sm:w-[75vw] max-w-[1280px] left-1/2 -translate-x-1/2 z-[60]',
        content: 'sm:w-auto',
        childList: 'sm:w-96',
        childLinkDescription: 'text-balance line-clamp-2'
      }"
      class="w-full justify-center"
    >
      <template
        v-for="navItem in items.filter((i: any) => i.slot && i.content)"
        :key="navItem.slot"
        #[`${navItem.slot}-content`]="{ item }"
      >
        <ul class="grid gap-2 p-4 w-full sm:w-[75vw] lg:grid-cols-2">
          <!-- Image/Video content - spans multiple rows, positioned left or right -->
          <li
            v-if="item.content"
            :class="[
              'row-span-3 overflow-hidden',
              item.content.position === 'right' ? 'lg:col-start-2 lg:row-start-1' : 'lg:col-start-1 lg:row-start-1'
            ]"
          >
            <Placeholder />
          </li>

          <!-- Navigation items - positioned opposite to image -->
          <li
            v-for="child in item.children"
            :key="child.label"
            :class="item.content?.position === 'right' ? 'lg:col-start-1' : 'lg:col-start-2'"
          >
            <ULink
              :to="child.to"
              class="block text-sm rounded-md p-3 transition-colors hover:bg-elevated/50 w-full"
            >
              <div class="font-medium text-highlighted mb-1 overflow-hidden text-ellipsis">
                {{ child.label }}
              </div>
              <div class="text-muted text-xs line-clamp-2 break-words overflow-hidden">
                {{ child.description }}
              </div>
            </ULink>
          </li>
        </ul>
      </template>
    </UNavigationMenu>
<template>
  <UHeader
    :ui="{
      container: 'overflow-visible',
      center: 'flex items-center gap-3 flex-1 overflow-visible'
    }"
  >
    <template #left>
      
    </template>

    <UNavigationMenu
      :items="items"
      variant="link"
      :teleport="true"
      :ui="{
        viewport: 'sm:w-[75vw] max-w-[1280px] left-1/2 -translate-x-1/2 z-[60]',
        content: 'sm:w-auto',
        childList: 'sm:w-96',
        childLinkDescription: 'text-balance line-clamp-2'
      }"
      class="w-full justify-center"
    >
      <template
        v-for="navItem in items.filter((i: any) => i.slot && i.content)"
        :key="navItem.slot"
        #[`${navItem.slot}-content`]="{ item }"
      >
        <ul class="grid gap-2 p-4 w-full sm:w-[75vw] lg:grid-cols-2">
          <!-- Image/Video content - spans multiple rows, positioned left or right -->
          <li
            v-if="item.content"
            :class="[
              'row-span-3 overflow-hidden',
              item.content.position === 'right' ? 'lg:col-start-2 lg:row-start-1' : 'lg:col-start-1 lg:row-start-1'
            ]"
          >
            <Placeholder />
          </li>

          <!-- Navigation items - positioned opposite to image -->
          <li
            v-for="child in item.children"
            :key="child.label"
            :class="item.content?.position === 'right' ? 'lg:col-start-1' : 'lg:col-start-2'"
          >
            <ULink
              :to="child.to"
              class="block text-sm rounded-md p-3 transition-colors hover:bg-elevated/50 w-full"
            >
              <div class="font-medium text-highlighted mb-1 overflow-hidden text-ellipsis">
                {{ child.label }}
              </div>
              <div class="text-muted text-xs line-clamp-2 break-words overflow-hidden">
                {{ child.description }}
              </div>
            </ULink>
          </li>
        </ul>
      </template>
    </UNavigationMenu>
No description
2 Replies
kapa.ai
kapa.ai•2mo ago
Hi @BenG. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I'm sorry, but the knowledge sources do not contain specific information about the issue where the width of the NavigationMenu is limited by the width of the Header content in Nuxt UI. There are no explicit solutions or workarounds for this scenario in the provided documents. However, based on the code you shared, you are already customizing the width of the NavigationMenu using Tailwind classes (e.g., sm:w-[75vw] max-w-[1280px]). If the menu is still constrained, it may be due to the parent container's CSS or layout. The knowledge sources do mention using the container and center props to control overflow and alignment in the header, but do not provide further details on breaking out of header width constraints. If you need more targeted help, you may want to check the official Nuxt UI documentation or community forums, as the current knowledge sources do not explicitly address this layout issue. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2mo ago
<@371347799255547916> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?