N
Nuxt•3mo ago
How Bizarre

NuxtUI: Close the USlideover when clicking on a link from the UNavigationMenu inside the USlideover

Guys, I need some help! How do I close the USlideover when I click on the link in the UNavigationMenu, which is placed inside the #body slot of the USlideover? 
<USlideover side="left">
  <UButton icon="i-heroicons-bars-3" size="md" variant="ghost" />

  <template #body>
    <UNavigationMenu trailing-icon="i-heroicons-plus" orientation="vertical" :items="items" />
  </template>
</USlideover>
<USlideover side="left">
  <UButton icon="i-heroicons-bars-3" size="md" variant="ghost" />

  <template #body>
    <UNavigationMenu trailing-icon="i-heroicons-plus" orientation="vertical" :items="items" />
  </template>
</USlideover>
3 Replies
kapa.ai
kapa.ai•3mo ago
Hi @How Bizarre. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To close the USlideover when clicking a link in the UNavigationMenu inside the #body slot, you need to control the open state of the USlideover using v-model:open. Then, handle the navigation menu's item selection to set the open state to false. However, the knowledge sources do not provide a direct example of closing the slideover from a UNavigationMenu item click. But, since USlideover supports v-model:open for controlling its visibility, and UNavigationMenu items can use the onSelect property to handle selection events, you can combine these features. Here’s how you can do it: 1. Use v-model:open to control the slideover. 2. Add an onSelect handler to your navigation menu items that sets the open state to false. Example: 
<script setup lang="ts">
import { ref } from 'vue'

const open = ref(false)

const items = [
  {
    label: 'Home',
    to: '/',
    onSelect: () => { open.value = false }
  },
  {
    label: 'About',
    to: '/about',
    onSelect: () => { open.value = false }
  }
  // ...other items
]
</script>

<template>
  <USlideover v-model:open="open" side="left">
    <UButton icon="i-heroicons-bars-3" size="md" variant="ghost" @click="open = true" />

    <template #body>
      <UNavigationMenu
        trailing-icon="i-heroicons-plus"
        orientation="vertical"
        :items="items"
      />
    </template>
  </USlideover>
</template>
<script setup lang="ts">
import { ref } from 'vue'

const open = ref(false)

const items = [
  {
    label: 'Home',
    to: '/',
    onSelect: () => { open.value = false }
  },
  {
    label: 'About',
    to: '/about',
    onSelect: () => { open.value = false }
  }
  // ...other items
]
</script>

<template>
  <USlideover v-model:open="open" side="left">
    <UButton icon="i-heroicons-bars-3" size="md" variant="ghost" @click="open = true" />

    <template #body>
      <UNavigationMenu
        trailing-icon="i-heroicons-plus"
        orientation="vertical"
        :items="items"
      />
    </template>
  </USlideover>
</template>
- The onSelect property is supported for navigation menu items and is the recommended way to handle item selection events, such as closing overlays or menus when a link is clicked see NavigationMenu items API. - The v-model:open directive is the standard way to control the open state of overlays like USlideover see Slideover control open state. If your navigation items are generated dynamically, ensure each item includes an onSelect handler that closes the slideover. Summary:
Use v-model:open on USlideover and set onSelect on each navigation item to close the slideover when a link is clicked. This approach is supported by the Nuxt UI component APIs and migration documentation. --- References:
- NavigationMenu items API
- Slideover control open state ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•3mo ago
<@528168605783818240> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
How Bizarre
How BizarreOP•3mo ago
The navigation items come as a JSON response from the API endpoint, and there are no open.value.

Did you find this page helpful?