© 2026 Hedgehog Software, LLC

TwitterGitHubDiscord
More
CommunitiesDocsAboutTermsPrivacy
Search
Star
Setup for Free
C#C
C#•3y ago•
5 replies
leo

Sidebar smooth animation in Blazor Wasm

There isn't to much to detail I'm using the default Bootstrap Template from Blazor Wasm project

I just want to know how can I add some kind of smooth animation when closing and opening the sidebar.
Here's a small piece of code

<div class="sidebar-nav scroll-sidebar @NavMenuCssClass" @onclick=ToggleNavMenu>
    <Sidebar />
</div>

@* Sidebar Interaction *@
@code {
    private bool collapseNavMenu = true;

    private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;

    private void ToggleNavMenu()
    {
        collapseNavMenu = !collapseNavMenu;
    }
}
<div class="sidebar-nav scroll-sidebar @NavMenuCssClass" @onclick=ToggleNavMenu>
    <Sidebar />
</div>

@* Sidebar Interaction *@
@code {
    private bool collapseNavMenu = true;

    private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;

    private void ToggleNavMenu()
    {
        collapseNavMenu = !collapseNavMenu;
    }
}


The trick here is adding and removing the *collapse" class from the navbar div.
Thanks!
C# banner
C#Join
We are a programming server aimed at coders discussing everything related to C# (CSharp) and .NET.
61,871Members
Resources

Similar Threads

Was this page helpful?
Recent Announcements

Similar Threads

✅ Blazor WASM Headers
C#CC# / help
4mo ago
Blazor wasm help
C#CC# / help
6mo ago
Blazor WASM Authentication
C#CC# / help
2y ago
❔ Blazor WASM & NetlifyCMS
C#CC# / help
3y ago