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

[terse wave]

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

Version

Nuxt = 3.17.2
@nuxt/ui==3.1.1
``

[unkempt goblet]

Hi @terse wave. 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...
]

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')
  }
}]

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: