Search results

Responsive Sidebar in Blazor Sidebar component

28 Jul 2021 / 1 minute to read

Sidebar often behaves differently on a mobile versus a desktop display. It has an effective feature that offers to set it in opened or closed state corresponding to the specified resolution. This is achieved through MediaQuery property that allows you to set the Sidebar in an expanded state or collapsed state only in user-defined resolution.

In the following sample, mediaQuery has been used for specific resolution to close and open sidebar.

Copied to clipboard
@using Syncfusion.Blazor.Navigations

<div id="header" style="height:45px;color:white;background-color:midnightblue;font-size:1.2rem;line-height:45px;">
    <span style="position:absolute; left:10px; font-size:25px;">&#9776;</span>
    <span style="margin-left:45%;">Header</span>

<SfSidebar Width="250px" MediaQuery="(min-width: 600px)">
        <div style="text-align: center;" class="text-content"> Sidebar </div>

<div class="text-content" style="text-align: center;">Main content</div>

    .e-sidebar {
        background-color: #f8f8f8;
        color: black;

    .text-content {
        font-size: 1.5rem;
        padding: 3rem;

    .main > div {
        padding: 0px !important;

Output be like the below.