Custom Navigation using Laravel Nova Dashboard.

Card.vue

<template>
    <div>
        
        <card class="p-2 m-1 w-full" v-for="item in card.menus" :key="item.group">
            <div class="tab__header">
                <a href="#" class="tab__link p-4 block no-underline flex justify-between" @click.prevent="active = !active">
                    <strong class="text-80">{{ item.group }}</strong>
                    <span class="down-Arrow text-80" v-show="!active">&#9660;</span>
                    <span class="up-Arrow text-80" v-show="active">&#9650;</span>
                </a>
            </div>

            <div class="tab__content p-2" v-show="active">
                <ul class="list-reset">
                    <li v-for="link in item.links" :key="item.group">
                        <router-link :to="{ name: link.name, params: link.params}" 
                            class="block no-underline text-90 hover:bg-30 p-3 cursor-pointer small">
                            {{ link.label }}
                        </router-link>
                    </li>
                </ul>
            </div>
        </card>
        
    </div>
</template>

<script>
export default {
    props: [
        'card',

        // The following props are only available on resource detail cards...
        // 'resource',
        // 'resourceId',
        // 'resourceName',
    ],
    data() {
        return {
            active: false,
        }
    }
}
</script>