Nuxt•4mo ago

navigationmenu parent not highlighted when vertical nor clickable?

I have a UNavigationMenu which is horizontal on desktop and vertical on mobile. on desktop the parent has a link to my main page say "/store" and it has children like "/store/popular" etc on desktop this works great i can click the parent or children and the parent is highlighted if im on /store. however in the vertical orientation the parent is no longer clickable as it only toggles showing or hiding its children nav items. and in the vertical orientation the parent is not highlighted as active when im on /store (in the docs it seems the parent is manually set to active to make it highlighted). is there a work around to these two issues?

8 Replies

kapa.ai•4mo ago

Hi @WiFi Plug. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- You're correct in your observations about the behavior of UNavigationMenu in vertical orientation: 1. Parent Not Clickable in Vertical Orientation:
In vertical orientation, when a parent item has children, it becomes a collapsible trigger rather than a direct link. This means clicking the parent toggles the submenu instead of navigating to the parent's to route. This is the intended behavior as described in the docs:

When orientation is vertical, a Collapsible component is used to display children.

There is no documented prop or workaround in the official docs to make the parent both a collapsible and a clickable link in vertical orientation. The only way to make a parent act as a regular link (and not collapsible) is to set collapsible: false, but then it will not show its children as a submenu in vertical mode, which is likely not what you want for a navigation menu with sub-items NavigationMenu Orientation. 2. Parent Not Highlighted as Active in Vertical Orientation:
The docs and examples show that the parent is not automatically highlighted as active in vertical orientation, even if its to matches the current route. In the examples, the active: true property is manually set on the parent item to force the highlight NavigationMenu Variant.
There is no mention of automatic route-based highlighting for parent items in vertical orientation in the documentation. Summary of Workarounds: - Clickable Parent:
There is no documented way to make a parent item both a collapsible (showing children) and a clickable link in vertical orientation. Setting collapsible: false makes it a link, but removes the submenu functionality. - Highlighting Parent:
You can manually set active: true on the parent item to force it to be highlighted in vertical orientation. Example:

{
  label: 'Store',
  to: '/store',
  active: true, // manually set
  children: [
    { label: 'Popular', to: '/store/popular' }
  ]
}

{
  label: 'Store',
  to: '/store',
  active: true, // manually set
  children: [
    { label: 'Popular', to: '/store/popular' }
  ]
}

Conclusion:
The current behavior is a limitation of the component as documented. If you need both a clickable parent and collapsible children in vertical orientation, you may need to implement a custom navigation solution or request this feature from the Nuxt UI team. For now, manual active highlighting is the only workaround for the highlight issue, and there is no built-in solution for making the parent both clickable and collapsible in vertical mode NavigationMenu Orientation NavigationMenu Variant. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

<@679734274840330384> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

WiFi PlugOP•4mo ago

@kapa.ai so in a new update apparently there's a collapsible option which i tried to add as false but it still doesn't seem to make the parent a link or highlighted? "So in latest commit 2be60cd, I reverted 07e1b4f and introduced a collapsible field in items instead. To summarize, by default in vertical orientation an item with children will act as a collapsible, you can set collapsible: false so the trigger can be a link and don't activate the collapsible and set open: true for example to force its open state. All of this independently of the collapsed prop to give more flexibility. " is my understanding of this wrong?

kapa.ai•4mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the current official documentation, your understanding aligns with the intended behavior of the collapsible option: - Setting collapsible: false on a parent item with children in vertical orientation should make the parent act as a regular link (not a collapsible trigger), and its children should still be displayed as a submenu. The docs state:

You can set the collapsible: false property on items with children to prevent them from being collapsible. This allows the item to act as a regular link while still displaying its children in a submenu.

NavigationMenu Orientation However, regarding your specific issues: - Parent Not Becoming a Link:
The documentation claims that with collapsible: false, the parent should be a link. If this is not happening in your implementation, it may be due to a bug or a mismatch between the documentation and the actual released version. - Parent Not Highlighted:
The documentation does not explicitly state that the parent will be automatically highlighted as active when using collapsible: false. In the examples, the active: true property is still set manually to highlight the parent, suggesting that automatic highlighting may not be implemented for this case. Summary:
According to the docs, setting collapsible: false should make the parent a link in vertical orientation, but the documentation does not guarantee automatic active highlighting. If you are not seeing the parent as a link, it may be a version issue or a bug. For highlighting, you may still need to set active: true manually. If you are using the latest version and it still does not work as described, the knowledge sources do not provide enough information to explain this discrepancy, and it may require checking the actual component code or GitHub issues for clarification. NavigationMenu Orientation ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

<@679734274840330384> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

WiFi PlugOP•4mo ago

@kapa.ai how do i ensure my nuxt ui is the latest version? as this was released a week ago

kapa.ai•4mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- To ensure your Nuxt UI is the latest version, you should upgrade the package using your package manager. The official documentation recommends using the nuxi upgrade command for Nuxt itself, but for Nuxt UI, you should update the @nuxt/ui dependency in your package.json to the latest version and then reinstall your dependencies. For example, with npm:

npm install @nuxt/ui@latest

npm install @nuxt/ui@latest

Or with yarn:

yarn add @nuxt/ui@latest

yarn add @nuxt/ui@latest

Or with pnpm:

pnpm add @nuxt/ui@latest

pnpm add @nuxt/ui@latest

After updating, you can check the installed version in your package.json or by running:

npm list @nuxt/ui

npm list @nuxt/ui

The documentation also mentions that Nuxt UI uses continuous preview releases, so if you want to test the very latest features or bug fixes before they are officially released, you can use a specific commit hash or PR number as the version in your package.json:

{
  "dependencies": {
    "@nuxt/ui": "<https://pkg.pr.new/@nuxt/ui@<commit-hash>">
  }
}

{
  "dependencies": {
    "@nuxt/ui": "<https://pkg.pr.new/@nuxt/ui@<commit-hash>">
  }
}

Replace <commit-hash> with the actual commit you want to use. This allows you to access the most recent changes, even before an official release is published Nuxt UI Installation Options. If you want to upgrade Nuxt itself, use:

npx nuxi upgrade

npx nuxi upgrade

Nuxt Upgrade Guide ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

<@679734274840330384> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

navigationmenu parent not highlighted when vertical nor clickable?

Did you find this page helpful?