Resizable sidebar inside RadzenLayout — like RadzenSplitter?

Radzen.Blazor Components
1

Hi,

I'm using RadzenSidebar inside RadzenLayout (slotted between header and footer like the docs example), and I'd like the user to be able to resize the sidebar's width at runtime — similar to how RadzenSplitter
lets you drag pane borders, with configurable min/max bounds.

Is there an officially supported way to:

  • bind/control the sidebar width at runtime, and
  • provide a draggable resize handle (splitter-like) with min/max bounds,

…while keeping the RadzenLayout slotting intact (header on top, footer on bottom, body filling the remaining space)?

If RadzenSidebar can't do this, what's the recommended approach — replacing it with a RadzenSplitter configuration that mimics the layout, or is there a CSS pattern you'd suggest? An example would be very helpful.

Environment: Radzen.Blazor 10.3.2, .NET 10, Blazor Server.

Thanks!

2

Hi @kl1mm,

Here is a possible implementation:

<RadzenLayout style="height: 100vh;">
    <RadzenHeader>
        <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem" Style="padding: 0 0.5rem;">
            <RadzenSidebarToggle 
                          Click="@(() => sidebarCollapsed = !sidebarCollapsed)" />
            <RadzenLabel Text="Resizable Sidebar with RadzenSplitter" Style="font-weight: 600;" />
        </RadzenStack>
    </RadzenHeader>
    <RadzenBody Style="padding: 0;">
        <RadzenSplitter Style="height: 100%;">
            <RadzenSplitterPane Size="250px" Min="150px" Max="600px" Collapsible="true" Collapsed="@sidebarCollapsed">
                <RadzenPanelMenu>
                    <RadzenPanelMenuItem Text="Dashboard" Icon="dashboard" />
                    <RadzenPanelMenuItem Text="Customers" Icon="people" />
                    <RadzenPanelMenuItem Text="Orders" Icon="shopping_cart" />
                    <RadzenPanelMenuItem Text="Reports" Icon="bar_chart" />
                </RadzenPanelMenu>
            </RadzenSplitterPane>
            <RadzenSplitterPane>
                <RadzenStack Gap="1rem" Style="padding: 1rem;">
                    <RadzenText TextStyle="TextStyle.H4">Drag the splitter bar to resize the sidebar</RadzenText>
                    <RadzenText TextStyle="TextStyle.Body1">Or click the menu button in the header to collapse it. Min 150px, Max 600px.</RadzenText>
                </RadzenStack>
            </RadzenSplitterPane>
        </RadzenSplitter>
    </RadzenBody>
    <RadzenFooter>Footer</RadzenFooter>
</RadzenLayout>

@code {
    bool sidebarCollapsed;
}

Live demo

3

Thanks @korchev,

i will give it a try and let u know. (Maybe need some days)

best regards kl1mm

4

Thanks, @korchev works so far.

It would be cool if the RadzenLayout support this out of the box for Sidebars.

best regards kl1mm

5

This is "out-of-the-box" already :slight_smile: It uses existing components without custom code.