NuxtN
Nuxt•6mo ago•
15 replies
Paul

Nuxt/Ui Navigation menu

I am using the nuxt/ui module with and i am trying to make it so the dropdown for events floats below the "events" icon and doesnt take up the whole width of the page, at its min width, i also need too be able to change other css properties of it 

<template>
    <UNavigationMenu 
    :items="navigationItems"
    class="bg-nhblue-900 px-4"
    >
        <template #item-leading="{ item }">
            <img v-if="item.img" :src="item.img" alt="" class="w-5 h-5 object-contain" />
            <UIcon v-else-if="item.icon" :name="item.icon" class="size-5" />
            <UAvatar v-else-if="item.avatar" v-bind="item.avatar" />
        </template>
    </UNavigationMenu>
</template>

<script setup>
import IconPng from '@/assets/icon.png'

const navigationItems = [
    {
        label: 'Home',
        img: IconPng,
        to: '/',
    },
    {
        label: 'About',
        to: '/about'
    },
    {
        label: 'Events',
        children: [
            {
                label: 'Upcoming'
            },
            {
                label: 'Prior'
            },
            {
                label: 'Make Event'
            }
        ]
    }
]

</script>


I only need to edit the dropdown menu for events
Was this page helpful?