NavigationMenu transitions/animations on toggle collapsed state

[tsyganov-vd]

Description

Hey! Thanks for trying to make nuxt/ui even more awesome.

I've been struggled with adding NavigationMenu items animation on toggling collapsed of/off states.
I'd like to make it work smoothly and keep only icons with popovers in collapsed state and show the rest only when collapsed is off. out of the box its only toggled on/off without transitions.
I see no option to pass slot to wrap labels with vue Transition component or use Motion-vue and either css animations like data-[collaped=true]:animate.... not working well because whole inner content of nav is wrapped with "v-if" and switched on collapsed.

In some components data-[state] animations works well, but not in collapsed NavigationMenu. Or am I doing something wrong?
Only a way I see is to override whole item slot. But for now I've just get rid of NavigationMenu and made my own custom component with fancy transitions.
Please point me to right direction and suggest best practices, cuz I'd like to use most of components and make it work with smooth transitions/animations, but sometimes got stucked with limitations/lack of knowledge.

offtop: For example, wasted many hours trying to achieve smooth slide-down transition for table expanded rows. Ended up with expanded slot with UCollapsible plus exclusive inner state for it, changed with setTimeout(() => { ... }, 300), Ugly, hucky, but it works.

[benjamincanac]

Would mind sharing an example of what you're trying to do because it's not clear to me. Are you using vertical or horizontal orientation? The NavigationMenu already has animations as you can see here: https://ui.nuxt.com/components/navigation-menu#orientation

You can override those easily using either the ui prop or app.config.ts.

[tsyganov-vd]

Would mind sharing an example of what you're trying to do because it's not clear to me. Are you using vertical or horizontal orientation? The NavigationMenu already has animations as you can see here: https://ui.nuxt.com/components/navigation-menu#orientation

You can override those easily using either the ui prop or app.config.ts.

Im trying to make vertical menu, which collapsed with sidebar.
Like here - https://dashboard-template.nuxt.dev/ - when you click on icon at header near "Home" heading -> sidebar collapsed -> menu should slide-out, but in example its just on/off without any transitions. And I don't see any options out of the box to make it work smoothly.

I've found some hacky way to achieve required behaviour, but its really ugly and I'd like to know how to do it "the right way" .

[benjamincanac]

What do you mean without any transitions? It seems correct to me:

CleanShot.2025-06-05.at.12.17.29.mp4

You can change the CSS animation using either the ui prop or your app.config.ts.

[tsyganov-vd]

What do you mean without any transitions? It seems correct to me:

CleanShot.2025-06-05.at.12.17.29.mp4
You can change the CSS animation using either the ui prop or your app.config.ts.

I mean toggling collapsed sidebar state with button in header near "Home" heading.

[benjamincanac]

You want to animate the DashboardSidebar then? How is this related to NavigationMenu? 🤔 Do you have a visual example?

[tsyganov-vd]

You want to animate the DashboardSidebar then? How is this related to NavigationMenu? 🤔 Do you have a visual example?

problem is NavigationMenu has :collapsed prop, which just hide inner content with v-if. And I'd like to apply transition for it, but cant wrap it with Transition tag or add animation on data-collapsed attribute.
For now I've built it with my own custom component, without NavigationMenu (but inspired with it, literally I've copypasted it with some additions)

[github-actions]

Hi! 👋

This issue has been automatically closed due to prolonged inactivity.

We're a small team and can't address every report, but we appreciate your feedback and contributions.

If this issue is still relevant with the latest version of Nuxt UI, please feel free to reopen or create a new issue with updated details.

Thank you for your understanding and support!

— Nuxt UI Team

[QuentinRoggyKelio]

Hi there !
I'm facing the same issue. We can see in the docs here that there is no transition when the collapsed props is used

[benjamincanac]

@QuentinRoggyKelio The NavigationMenu when collapsed only displays icons, you can use the tooltip or popover props to display the children.

[QuentinRoggyKelio]

Thanks for the reply, @benjamincanac. I don’t want to display children—the component works fine. I just want to add a transition between the open and closed states. In the docs examples, there’s no transition when collapsing a vertical navigation menu with the collapsed prop.