Class RadzenSidebar

A collapsible sidebar component for application navigation, typically used within RadzenLayout. RadzenSidebar provides a navigation panel that can be toggled open/closed and responds to screen size changes. Commonly used in application layouts for primary navigation menus. Features responsive design (automatically collapses on mobile devices and expands on desktop, configurable), positioning on Left/Right/Start/End of the layout, full height option to span entire layout height or align with body section only, programmatic expand/collapse via Expanded property or Toggle() method, seamless integration with RadzenLayout/RadzenHeader/RadzenBody/RadzenFooter, and typically contains RadzenPanelMenu or RadzenMenu for navigation. Must be used inside RadzenLayout to enable responsive behavior and proper layout integration. Use @bind-Expanded for two-way binding to control sidebar state from code.

Inheritance

object

ComponentBase

RadzenComponent

RadzenComponentWithChildren

RadzenSidebar

Implements

IComponent

IHandleEvent

IHandleAfterRender

IDisposable

Inherited Members

RadzenComponentWithChildren.ChildContent

RadzenComponent.OnMouseEnter()

RadzenComponent.OnMouseLeave()

RadzenComponent.OnContextMenu(MouseEventArgs)

RadzenComponent.GetCssClass()

RadzenComponent.GetId()

RadzenComponent.Debounce(Func<Task>, int)

RadzenComponent.OnAfterRenderAsync(bool)

RadzenComponent.RaiseContextMenu(MouseEventArgs)

RadzenComponent.RaiseMouseEnter()

RadzenComponent.AddContextMenu()

RadzenComponent.RaiseMouseLeave()

RadzenComponent.Dispose()

RadzenComponent.Attributes

RadzenComponent.Element

RadzenComponent.MouseEnter

RadzenComponent.MouseLeave

RadzenComponent.ContextMenu

RadzenComponent.Culture

RadzenComponent.DefaultCulture

RadzenComponent.Visible

RadzenComponent.UniqueID

RadzenComponent.JSRuntime

RadzenComponent.IsJSRuntimeAvailable

RadzenComponent.Reference

RadzenComponent.CurrentStyle

ComponentBase.OnInitializedAsync()

ComponentBase.OnParametersSet()

ComponentBase.OnParametersSetAsync()

ComponentBase.StateHasChanged()

ComponentBase.ShouldRender()

ComponentBase.OnAfterRender(bool)

ComponentBase.InvokeAsync(Action)

ComponentBase.InvokeAsync(Func<Task>)

ComponentBase.DispatchExceptionAsync(Exception)

object.GetType()

object.MemberwiseClone()

object.ToString()

object.Equals(object)

object.Equals(object, object)

object.ReferenceEquals(object, object)

object.GetHashCode()

Namespace: Radzen.Blazor

Assembly: Radzen.Blazor.dll

Syntax

public class RadzenSidebar : RadzenComponentWithChildren, IComponent, IHandleEvent, IHandleAfterRender, IDisposable

Examples

Basic sidebar with menu:

<RadzenLayout>
    <RadzenHeader>...</RadzenHeader>
    <RadzenSidebar @bind-Expanded=@sidebarExpanded>
        <RadzenPanelMenu>
            <RadzenPanelMenuItem Text="Home" Icon="home" Path="/" />
            <RadzenPanelMenuItem Text="Orders" Icon="shopping_cart" Path="/orders" />
        </RadzenPanelMenu>
    </RadzenSidebar>
    <RadzenBody>...</RadzenBody>
</RadzenLayout>

Right-positioned full-height sidebar:

<RadzenSidebar Position="SidebarPosition.Right" FullHeight="true">
    Sidebar content...
</RadzenSidebar>

Constructors

RadzenSidebar()

A collapsible sidebar component for application navigation, typically used within RadzenLayout. RadzenSidebar provides a navigation panel that can be toggled open/closed and responds to screen size changes. Commonly used in application layouts for primary navigation menus. Features responsive design (automatically collapses on mobile devices and expands on desktop, configurable), positioning on Left/Right/Start/End of the layout, full height option to span entire layout height or align with body section only, programmatic expand/collapse via Expanded property or Toggle() method, seamless integration with RadzenLayout/RadzenHeader/RadzenBody/RadzenFooter, and typically contains RadzenPanelMenu or RadzenMenu for navigation. Must be used inside RadzenLayout to enable responsive behavior and proper layout integration. Use @bind-Expanded for two-way binding to control sidebar state from code.

Declaration

public RadzenSidebar()

Examples

Basic sidebar with menu:

<RadzenLayout>
    <RadzenHeader>...</RadzenHeader>
    <RadzenSidebar @bind-Expanded=@sidebarExpanded>
        <RadzenPanelMenu>
            <RadzenPanelMenuItem Text="Home" Icon="home" Path="/" />
            <RadzenPanelMenuItem Text="Orders" Icon="shopping_cart" Path="/orders" />
        </RadzenPanelMenu>
    </RadzenSidebar>
    <RadzenBody>...</RadzenBody>
</RadzenLayout>

Right-positioned full-height sidebar:

<RadzenSidebar Position="SidebarPosition.Right" FullHeight="true">
    Sidebar content...
</RadzenSidebar>

Properties

Expanded

Gets or sets a value indicating whether this RadzenSidebar is expanded.

Declaration

[Parameter]
public bool Expanded { get; set; }

Property Value

Type	Description
bool	true if expanded; otherwise, false.

ExpandedChanged

Gets or sets the expanded changed callback.

Declaration

[Parameter]
public EventCallback<bool> ExpandedChanged { get; set; }

Property Value

Type	Description
EventCallback<bool>	The expanded changed callback.

FullHeight

Gets or sets whether the sidebar occupies the full height of the layout (from top to bottom). When false (default), sidebar appears between header and footer, aligned with body section. When true, sidebar stretches the entire layout height alongside all sections.

Declaration

[Parameter]
public bool FullHeight { get; set; }

Property Value

Type	Description
bool	true for full-height sidebar; false for body-aligned sidebar. Default is false.

Layout

The RadzenLayout this component is nested in.

Declaration

[CascadingParameter]
public RadzenLayout Layout { get; set; }

Property Value

Type	Description
RadzenLayout

Position

Gets or sets which side of the layout the sidebar appears on. Options include Left, Right, Start (left in LTR, right in RTL), End (right in LTR, left in RTL).

Declaration

[Parameter]
public SidebarPosition? Position { get; set; }

Property Value

Type	Description
SidebarPosition?	The sidebar position. Default is Start.

Responsive

Gets or sets whether the sidebar should automatically collapse on small screens (responsive mode). When true (default), the sidebar expands on desktop and collapses on mobile. When false, responsive behavior is disabled. Responsive mode only works when RadzenSidebar is inside RadzenLayout.

Declaration

[Parameter]
public bool Responsive { get; set; }

Property Value

Type	Description
bool	true to enable responsive collapse/expand; false to disable. Default is true.

ResponsiveMaxWidth

Gets or sets the maximum width, in pixels, at which the component switches to a responsive layout.

Declaration

[Parameter]
public string ResponsiveMaxWidth { get; set; }

Property Value

Type	Description
string

Style

Gets or sets custom CSS styles for the sidebar. Default positioning and sizing can be overridden via this property.

Declaration

[Parameter]
public override string Style { get; set; }

Property Value

Type	Description
string	The CSS style string. Default is "top:51px;bottom:57px;width:250px;".

Overrides

RadzenComponent.Style

Methods

BuildRenderTree(RenderTreeBuilder)

A collapsible sidebar component for application navigation, typically used within RadzenLayout. RadzenSidebar provides a navigation panel that can be toggled open/closed and responds to screen size changes. Commonly used in application layouts for primary navigation menus. Features responsive design (automatically collapses on mobile devices and expands on desktop, configurable), positioning on Left/Right/Start/End of the layout, full height option to span entire layout height or align with body section only, programmatic expand/collapse via Expanded property or Toggle() method, seamless integration with RadzenLayout/RadzenHeader/RadzenBody/RadzenFooter, and typically contains RadzenPanelMenu or RadzenMenu for navigation. Must be used inside RadzenLayout to enable responsive behavior and proper layout integration. Use @bind-Expanded for two-way binding to control sidebar state from code.

Declaration

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

Type	Name	Description
RenderTreeBuilder	__builder

Overrides

ComponentBase.BuildRenderTree(RenderTreeBuilder)

GetComponentCssClass()

Gets the component CSS class.

Declaration

protected override string GetComponentCssClass()

Returns

Type	Description
string

Overrides

RadzenComponent.GetComponentCssClass()

GetStyle()

Gets the style.

Declaration

protected string GetStyle()

Returns

Type	Description
string	System.String.

OnInitialized()

Called by the Blazor runtime.

Declaration

protected override void OnInitialized()

Overrides

RadzenComponent.OnInitialized()

SetParametersAsync(ParameterView)

Called by the Blazor runtime when parameters are set.

Declaration

public override Task SetParametersAsync(ParameterView parameters)

Parameters

Type	Name	Description
ParameterView	parameters	The parameters.

Returns

Type	Description
Task

Overrides

RadzenComponent.SetParametersAsync(ParameterView)

Toggle()

Programmatically toggles the sidebar between expanded and collapsed states. Call this method to show/hide the sidebar from code, such as from a hamburger menu button click.

Declaration

public void Toggle()

Implements

IComponent

IHandleEvent

IHandleAfterRender

IDisposable