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.
IComponent
IHandleEvent
IHandleAfterRender
RadzenComponentWithChildren.ChildContent
RadzenComponent.OnAfterRenderAsync
RadzenComponent.RaiseContextMenu
RadzenComponent.RaiseMouseEnter
RadzenComponent.AddContextMenu
RadzenComponent.RaiseMouseLeave
RadzenComponent.OnBecameInvisible
RadzenComponent.DefaultCulture
RadzenComponent.IsJSRuntimeAvailable
ComponentBase.OnInitializedAsync
ComponentBase.OnParametersSet
ComponentBase.OnParametersSetAsync
ComponentBase.StateHasChanged
ComponentBase.ShouldRender
ComponentBase.OnAfterRender
ComponentBase.InvokeAsync
ComponentBase.DispatchExceptionAsync
ComponentBase.RendererInfo
ComponentBase.Assets
ComponentBase.AssignedRenderMode
Namespace: Radzen.Blazor
Assembly: Radzen.Blazor.dll
public class RadzenSidebar : RadzenComponentWithChildren, IComponent, IHandleEvent, IHandleAfterRenderBasic 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>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.
public RadzenSidebar()Gets or sets a value indicating whether this RadzenSidebar is expanded.
public bool Expanded { get; set; }| Type | Description |
|---|---|
| bool | Gets or sets a value indicating whether this RadzenSidebar is expanded. |
Gets or sets the expanded changed callback.
public EventCallback<bool> ExpandedChanged { get; set; }| Type | Description |
|---|---|
| EventCallback<bool> | Gets or sets the expanded changed callback. |
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.
public bool FullHeight { get; set; }| Type | Description |
|---|---|
| bool | 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. |
The RadzenLayout this component is nested in.
public RadzenLayout Layout { get; set; }| Type | Description |
|---|---|
| RadzenLayout | The RadzenLayout this component is nested in. |
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).
public SidebarPosition? Position { get; set; }| Type | Description |
|---|---|
| SidebarPosition? | 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). |
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.
public bool Responsive { get; set; }| Type | Description |
|---|---|
| bool | 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. |
Gets or sets the maximum width, in pixels, at which the component switches to a responsive layout.
public string ResponsiveMaxWidth { get; set; }| Type | Description |
|---|---|
| string | Gets or sets the maximum width, in pixels, at which the component switches to a responsive layout. |
Gets or sets custom CSS styles for the sidebar. Default positioning and sizing can be overridden via this property.
public string Style { get; set; }| Type | Description |
|---|---|
| string | Gets or sets custom CSS styles for the sidebar. Default positioning and sizing can be overridden via this property. |
protected override void BuildRenderTree(Rendering.RenderTreeBuilder __builder)| Type | Name | Description |
|---|---|---|
| Rendering.RenderTreeBuilder | __builder |
protected override string GetComponentCssClass()| Type | Description |
|---|---|
| string |
Gets the style.
protected string GetStyle()| Type | Description |
|---|---|
| string | System.String. |
public override Task SetParametersAsync(ParameterView parameters)| Type | Name | Description |
|---|---|---|
| ParameterView | parameters |
| Type | Description |
|---|---|
| Task |
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.
public void Toggle()