N
Nuxt•2mo ago
OlyverChan

How to edit with of nuxt ui navigation menu

<template>
    <div class="fixed top-0 left-0 z-50 px-2">
        <div class="fixed top-0 left-0 shadow-lg w-full h-12"></div>
        <UNavigationMenu highlight :items="items" class="text-white">
        </UNavigationMenu>
    </div>
    <UAlert v-if="enableAlert" :title="alertMessage" class="fixed top-12"/>
    
</template>

<script setup lang="js">
import { inject } from 'vue';
import { Ref } from 'vue';


const alertMessage = inject<Ref<string>>('alertMessage')
const enableAlert = inject<Ref<boolean>>('enableAlert')

// navigation item
const items = [
    {
        label:'Home',
        to: '/'
    },
    {
        label:'About',
        to: '/about'
    },
    {
        label:'Examples',
        children: [
            {
                label: 'messageApp',
                to: '/message'
            }
        ]
    },
    {
        label:'Projects',
        to: '/projects'
    },
    {
        label:'For \"you\"',
        to: '/you'
    }
]

</script>
<template>
    <div class="fixed top-0 left-0 z-50 px-2">
        <div class="fixed top-0 left-0 shadow-lg w-full h-12"></div>
        <UNavigationMenu highlight :items="items" class="text-white">
        </UNavigationMenu>
    </div>
    <UAlert v-if="enableAlert" :title="alertMessage" class="fixed top-12"/>
    
</template>

<script setup lang="js">
import { inject } from 'vue';
import { Ref } from 'vue';


const alertMessage = inject<Ref<string>>('alertMessage')
const enableAlert = inject<Ref<boolean>>('enableAlert')

// navigation item
const items = [
    {
        label:'Home',
        to: '/'
    },
    {
        label:'About',
        to: '/about'
    },
    {
        label:'Examples',
        children: [
            {
                label: 'messageApp',
                to: '/message'
            }
        ]
    },
    {
        label:'Projects',
        to: '/projects'
    },
    {
        label:'For \"you\"',
        to: '/you'
    }
]

</script>
I have this vue / vite nuxt ui project How do i make it so the children doesnt take the full width of the u nav menu? I just want it to take a fixed width
5 Replies
kapa.ai
kapa.ai•2mo ago
Hi @Oyl. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To control the width of the children dropdown in your Nuxt UI NavigationMenu component, you can use the ui prop to customize the viewport and content width. Based on the knowledge sources, you can set a fixed width for the dropdown content instead of letting it take the full width. Here's how you can modify your code: 
<template>
    <div class="fixed top-0 left-0 z-50 px-2">
        <div class="fixed top-0 left-0 shadow-lg w-full h-12"></div>
        <UNavigationMenu 
            highlight 
            :items="items" 
            class="text-white"
            :ui="{
                viewport: 'sm:w-(--reka-navigation-menu-viewport-width)',
                childList: 'sm:w-60',
                content: 'w-60'
            }"
        >
        </UNavigationMenu>
    </div>
    <UAlert v-if="enableAlert" :title="alertMessage" class="fixed top-12"/>
</template>
<template>
    <div class="fixed top-0 left-0 z-50 px-2">
        <div class="fixed top-0 left-0 shadow-lg w-full h-12"></div>
        <UNavigationMenu 
            highlight 
            :items="items" 
            class="text-white"
            :ui="{
                viewport: 'sm:w-(--reka-navigation-menu-viewport-width)',
                childList: 'sm:w-60',
                content: 'w-60'
            }"
        >
        </UNavigationMenu>
    </div>
    <UAlert v-if="enableAlert" :title="alertMessage" class="fixed top-12"/>
</template>
The key parts of this solution are: 1. Using the :ui prop to override the default styling 2. Setting viewport: 'sm:w-(--reka-navigation-menu-viewport-width)' to enable dynamic width control 3. Setting childList: 'sm:w-60' to make the dropdown list 60 (15rem) units wide 4. Setting content: 'w-60' to ensure the content also has the same width This approach is based on the example from the NavigationMenu documentation, which shows how to customize the viewport width using CSS variables. If you need a different width, you can adjust the w-60 value to any other Tailwind width class like w-48, w-72, etc., depending on your preference. You can also define a custom width in your CSS and reference it in the UI configuration if you need a very specific width that's not covered by Tailwind's default spacing scale. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2mo ago
<@1267552151454875751> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
OlyverChan
OlyverChanOP•2mo ago
@kapa.ai can i do width fit?
kapa.ai
kapa.ai•2mo ago
Let me check the knowledge base for you again. One moment! :books: ---------------------- Yes, you can set the width to fit the content instead of using a fixed width. To make the NavigationMenu dropdown width fit its content, you can use Tailwind's w-fit or w-auto utility classes. Here's how you can modify your code: 
<UNavigationMenu 
  highlight 
  :items="items" 
  class="text-white"
  :ui="{
    viewport: 'sm:w-fit',
    childList: 'sm:w-fit',
    content: 'w-fit'
  }"
>
</UNavigationMenu>
<UNavigationMenu 
  highlight 
  :items="items" 
  class="text-white"
  :ui="{
    viewport: 'sm:w-fit',
    childList: 'sm:w-fit',
    content: 'w-fit'
  }"
>
</UNavigationMenu>
This approach will make the dropdown menu adjust its width based on the content inside it, rather than taking up a fixed width like w-60. The menu will be just wide enough to fit its content. If you find that w-fit makes the dropdown too narrow, you can also set a minimum width while still allowing it to grow as needed: 
<UNavigationMenu 
  highlight 
  :items="items" 
  class="text-white"
  :ui="{
    viewport: 'sm:min-w-[200px] sm:w-fit',
    childList: 'sm:min-w-[200px] sm:w-fit',
    content: 'min-w-[200px] w-fit'
  }"
>
</UNavigationMenu>
<UNavigationMenu 
  highlight 
  :items="items" 
  class="text-white"
  :ui="{
    viewport: 'sm:min-w-[200px] sm:w-fit',
    childList: 'sm:min-w-[200px] sm:w-fit',
    content: 'min-w-[200px] w-fit'
  }"
>
</UNavigationMenu>
This will ensure the dropdown is at least 200px wide but can expand if the content requires more space. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2mo ago
<@1267552151454875751> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?