feat(NcAppNavigation): add animation effect for navigation items

[jancborchardt]

☑️ Resolves

It would be nice to have an animation of the hover feedback highlight of the NcAppNavigation. This makes it feel nicer and smoother, like you are actually interacting with something.

This is a prototype to see how that could look like. Has been tested in the styleguide.
@susnux @ShGKme please check if this would this be good as a base, or should take a different approach.

🖼️ Screenshots

🏚️ Before

Screencast.From.2026-06-27.01-40-20.webm

🏡 After

Screencast.From.2026-06-27.01-34-40.webm

🏁 Checklist

• ⛑️ Tests are included or are not applicable
• 📘 Component documentation has been extended, updated or is not applicable
• 2️⃣ Backport to stable8 for maintained Vue 2 version or not applicable

Assisted-by: ClaudeCode:claude-opus-4-8

[codecov]

Codecov Report

❌ Patch coverage is 73.33333% with 16 lines in your changes missing coverage. Please review.
✅ Project coverage is 53.60%. Comparing base (82a359a) to head (9a791d2).

Files with missing lines	Patch %	Lines
...onents/NcAppNavigationItem/NcAppNavigationItem.vue	20.00%	7 Missing and 1 partial ⚠️
...onents/NcAppNavigationList/NcAppNavigationList.vue	83.67%	6 Missing and 2 partials ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #8685      +/-   ##
==========================================
+ Coverage   53.31%   53.60%   +0.29%     
==========================================
  Files         109      110       +1     
  Lines        3697     3755      +58     
  Branches     1083     1094      +11     
==========================================
+ Hits         1971     2013      +42     
- Misses       1472     1485      +13     
- Partials      254      257       +3     

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[susnux]

I do not see anything in the "after" screencast that requires JS changes, that should be possible with pure CSS so no heavy mutation observer is required, no?

[jancborchardt]

@susnux adjusted the PR to use minimal needed JS, also rebased and tests fixed.

[susnux]

what is the difference between this JS implementation and a simple CSS on hover animation?

[jancborchardt]

@susnux the CSS :hover fades the bg of each entry in place. The JS moves that single highlight that slides from the old entry to the new one. That travel between separate elements can’t be done by CSS alone cause a transition can only work on the properties of an element itself but not on siblings.

[jancborchardt]

(Maybe it’s not super obvious on the screencast, especially in the top part where there’s an active element. But there is a background highlight which looks like it travels across the different entries.)

[marcoambrosini]

I think it looks really nice!

[jancborchardt]

@susnux @ShGKme what's your updated take on this with the latest changes? Anything specific you would like to see done differently?

[Antreesy]

Visually looks great, left my concerns regarding performance in the comments

[Antreesy]

Pointer events are fired rapidly, so it probably makes sense to throttle them (say 50-100ms, or requestAnimationFrame is enough to fire less and still feel like it's not lagging behind the movement)?

[Antreesy]

Follow-up: what do we need to extend it to other elements used in app navigations, e.g. all other NcAppNavigation* or NcListItem?

[Antreesy]

If it's the same entry (or child of the same entry) as currently highlighted one, we should not fire anything for it again

[Antreesy]

These IMO are main points of concerns - might be expensive and causes browsers to rearrange the rendering work on the page to be executed

[jancborchardt]

@Antreesy your concerns are addressed, could you re-review? :)

[ShGKme]

(Maybe it’s not super obvious on the screencast, especially in the top part where there’s an active element. But there is a background highlight which looks like it travels across the different entries.)

The effect is just slightly visible, but for me it "lags". I don't know if this is intentional, but I can see how late the background is moving to my mouse, which feels like a slow, non-performant UI.

At the same time, it is quite a huge code using JS for styling, which has maintenance cost and is more fragile than more simply implemented animations.

Do you want only this specific effect?
The current is "not obvious" but expensive and gives a low-performance feeling.

---

It is inconsistent with other navigations. Do we plan to do the same for?

• Settings dialog navigation
• List items like in Talk or Mail

[ShGKme]

I guess this will be incompatible with virtual lists (virtual scrolling).

[susnux]

This does not work with virtual scrolling navigations.
E.g. imagine on files the folder tree with 1000 folders or on Talk with hundreds of chats.
With virtual scrolling the list itself needs to be aware of the current state for the animation.

So the animation should not inject or try to guess anything from HTML but instead there needs to be a way to communicate the requested animation between child components and the list itself.

[jancborchardt]

@susnux @ShGKme I went with a new approach that should be much more performant and is visually the same. I had too many requirements initially to try and make it perfect but that overloaded it.

@ShGKme Also reduced the time from 100ms to 50ms and now it feels quite snappy.

It is inconsistent with other navigations. Do we plan to do the same for?

• Settings dialog navigation
• List items like in Talk or Mail

@ShGKme yes, just like for the sidebar tabs at #8793, it would also look nice for settings dialog nav and list items as you say, as well as action menu items (and probably more places).