N
Nuxt•7mo ago
Batchfy

How to use click handlers instead of 'to' in UNavigationMenu items

Also posted on GitHub Discussion How to use click handlers instead of 'to' in UNavigationMenu items Description I'm using UNavigationMenu with a list of NavigationMenuItem[] items. Currently, to make an item clickable, it needs a to: "/path" property which changes the route. However, for my application, I want to change views without changing routes. What I've tried: - Adding click: () => { /* handler */ } to my navigation items - Adding @select="handleSelect" to the UNavigationMenu component - Using a select handler that calls item.click() Current behavior: When I click on navigation items, nothing happens. It seems the UNavigationMenu component does not properly recognize or trigger the click handlers in the items. 
// My current setup
const handleSelect = (item: NavigationMenuItem) => {
   console.log("selected item", item.label) // This logs correctly
   if (item.click) {
       item.click() // This doesn't seem to execute
   }
}

const items: NavigationMenuItem[][] = [
   [
       {
           label: "Home",
           icon: "i-lucide-house",
           // to: "/" - I want to avoid this
           click: () => {
               console.log("Home clicked!") // This never logs
               tab.value = "home"
           }
       },
       // Other items...
   ]
]

// my template
<UNavigationMenu
    :collapsed="collapsed"
    :items="items[0]"
    orientation="vertical"
    @select="handleSelect"
/>
// My current setup
const handleSelect = (item: NavigationMenuItem) => {
   console.log("selected item", item.label) // This logs correctly
   if (item.click) {
       item.click() // This doesn't seem to execute
   }
}

const items: NavigationMenuItem[][] = [
   [
       {
           label: "Home",
           icon: "i-lucide-house",
           // to: "/" - I want to avoid this
           click: () => {
               console.log("Home clicked!") // This never logs
               tab.value = "home"
           }
       },
       // Other items...
   ]
]

// my template
<UNavigationMenu
    :collapsed="collapsed"
    :items="items[0]"
    orientation="vertical"
    @select="handleSelect"
/>
Version ` Nuxt = 3.17.2 @nuxt/ui==3.1.1
GitHub
How to use click handlers instead of 'to' in UNavigationMenu items ...
How to use click handlers instead of &#39;to&#39; in UNavigationMenu items Description I&#39;m using UNavigationMenu with a list of NavigationMenuItem[] items. Currently, to make an item clickable,...
2 Replies
kapa.ai
kapa.ai•7mo ago
Hi @Batchfy. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The knowledge sources indicate that the click handler for navigation items in Nuxt UI's UNavigationMenu has changed from a custom click property to the standard Vue onClick property. This is part of a migration for consistency across components. You should use onClick instead of click in your NavigationMenuItem objects. Here’s how you should define your items: 
const items: NavigationMenuItem[] = [
  {
    label: "Home",
    icon: "i-lucide-house",
    onClick: () => {
      console.log("Home clicked!");
      tab.value = "home";
    }
  },
  // Other items...
]
const items: NavigationMenuItem[] = [
  {
    label: "Home",
    icon: "i-lucide-house",
    onClick: () => {
      console.log("Home clicked!");
      tab.value = "home";
    }
  },
  // Other items...
]
And you do not need to handle the click in a separate @select handler; the onClick will be called automatically when the item is selected. If you want to handle selection for all items, you can still use the @select event, but for per-item logic, use onClick directly in the item definition. This change is documented in the migration guide:
The click field in different components has been removed in favor of the native Vue onClick event:
> 
const items = [{
  label: 'Edit',
  // click: () => { ... }
  onClick: () => {
    console.log('Edit')
  }
}]
const items = [{
  label: 'Edit',
  // click: () => { ... }
  onClick: () => {
    console.log('Edit')
  }
}]
This change affects ... all component that have items links like NavigationMenu, DropdownMenu, CommandPalette, etc.
>
Getting-started > Changes from v2
So, update your items to use onClick and remove the custom click property. This should resolve your issue. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•7mo ago
<@1274439042875785226> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?