Menu
I'm using Radzen layout component for my Blazor app MainLayout but the sidebar-expanded doesn't work as it is in the documentation. If I click the toggle, the sidebar wont collapsed nor expanded.
@inherits LayoutComponentBase
@using Radzen
@using Radzen.Blazor
<RadzenComponents @rendermode="InteractiveServer" />
<RadzenLayout>
<RadzenHeader>
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0">
<RadzenSidebarToggle Click="@ToggleSidebar" />
<RadzenLabel Text="Header" />
</RadzenStack>
</RadzenHeader>
<RadzenSidebar Responsive="false" Style="width: max-content">
<RadzenPanelMenu DisplayStyle="@(sidebarExpanded ? MenuItemDisplayStyle.IconAndText : MenuItemDisplayStyle.Icon)" ShowArrow="false">
<RadzenPanelMenuItem Text="Overview" Icon="home" Path="/" />
<RadzenPanelMenuItem Text="Dashboard" Icon="dashboard" Path="counter" />
<RadzenPanelMenuItem Text="UI Fundamentals" Icon="auto_awesome">
<RadzenPanelMenuItem Text="Themes" Icon="color_lens" />
<RadzenPanelMenuItem Text="Colors" Icon="invert_colors" />
</RadzenPanelMenuItem>
</RadzenPanelMenu>
</RadzenSidebar>
<div class="rz-p-4">
@Body
</div>
<RadzenFooter>
Footer
</RadzenFooter>
</RadzenLayout>
@code {
bool sidebarExpanded = true;
void ToggleSidebar()
{
sidebarExpanded = !sidebarExpanded;
StateHasChanged();
}
}
I'm using .Net 8 server-side render mode and I've made sure that the installation for the Radzen is correct, because it works just fine with the other Radzen component but the sidebar. I don't know what else's wrong.
274
asked Dec 08 '25 08:12
Find your App.razor and change Routes like below, it will work.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="/" />
<link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
<link rel="stylesheet" href="app.css" />
<link rel="stylesheet" href="BlazorApp.styles.css" />
<link rel="icon" type="image/png" href="favicon.png" />
<RadzenTheme Theme="material" @rendermode="InteractiveServer" />
<HeadOutlet />
</head>
<body>
<Routes @rendermode="InteractiveServer"/>
<script src="_framework/blazor.web.js"></script>
<script src="_content/Radzen.Blazor/Radzen.Blazor.js?v=@(typeof(Radzen.Colors).Assembly.GetName().Version)"></script>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With