Sidebar / API

Blazor Sidebar Example - API Configuration

Loading Syncfusion Blazor Server Demos…

Sidebar
The Blazor Sidebar is an expandable and collapsible component that typically acts as a side container to place primary or secondary content alongside the main content. It provides flexible options that can be shown and hidden based on user interactions.
Overview

The Sidebar component is a collapsible side content placed along with the main content either in left or right side of the page.


Options

Toggle - Toggles the Sidebar to be open or closed state.



Position - Allows to place the sidebar in right or left side of the page.



Types - Specifies the act of expanding or collapsing the sidebar with main content.



Closing on document click - Allows to collapse/close the sidebar on document click.



Backdrop - Sets the backdrop over the main content area in an open/expanded state.



This sample demonstrates Sidebar component customization using properties from the property pane. Select any combination of properties to customize the Sidebar. Click the hamburger menu icon to expand/collapse the sidebar.

Customization capabilities:

  • Toggle sidebar open/closed state via toggle button
  • Change Sidebar Position via position button
  • Modify Sidebar Type from dropdown options
  • Control sidebar collapse/close on document click
  • Enable/disable overlay using ShowBackdrop property
Transform your Blazor web apps today with Syncfusion® Blazor components
145+ high-performance and responsive UI components
Dedicated support
Hassle-free licensing
TRY IT FOR FREE
Documentation
Forum
Blog
Knowledge Base
Copyright © 2001 - 2025 Syncfusion® Inc.