Open submenu status in vertical NavigationMenu

[kofeinstyle]

For what version of Nuxt UI are you asking this question?

v3-alpha

Description

For what version of Nuxt UI are you asking this question?

v3.0.0-alpha.8

Component

NavigationMenu

Description

I’m trying to use navigation-menu from Nuxt UI v3.0.0-alpha. I’m using the vertical menu for page navigation in the sidebar.

When navigating to the /products page, the menu item is highlighted as selected, but after reloading the page, the submenu appears closed. However, if I open it, you can see that it is selected.

Is this an error in alpha.8 or how can I achieve an open submenu state after a page reload if current route matched? Additionally, is it possible to set all submenus to expanded by default?

<script lang="ts" setup>
const items = ref([
  [
    {
      label: 'Home',
      icon: 'i-lucide-home',
      to: '/',
    },
    {
      label: 'Products',
      icon: 'i-lucide-package-search',
      children: [
        {
          label: 'Products',
          icon: 'i-lucide-package-search',
          to: '/products',
        },
      ],
    },
  ],
])
</script>

<template>
  <div>
    <UNavigationMenu
      orientation="vertical"
      :items="items"
      class="data-[orientation=vertical]:w-full data-[orientation=vertical]:border-l border-[var(--ui-border)]"
    />
  </div>
</template>

[benjamincanac]

Just added the ability to pass open & defaultOpen on items that will be passed to the Collapsible component used underneath.