Nuxt/Ui Navigation menu

<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>