State Persistence in Blazor Sidebar Component

15 Apr 20251 minute to read

State persistence allows the Sidebar component to retain the IsOpen property value in localStorage for maintaining its state, even if the browser is refreshed or when navigating to a different page within the browser.

This behavior is controlled by the EnablePersistence property, which is set to false by default. When set to true, the IsOpen property value of the Sidebar component will be retained even after a page refresh.

NOTE

The Sidebar component’s ID is essential for enabling state persistence, as the persisted data is stored and retrieved based on the component’s ID.

@using Syncfusion.Blazor.Navigations
@using Syncfusion.Blazor.Buttons

<SfSidebar @ref="sidebarObj" ID="Sidebar" Type=SidebarType.Push Width="280px" @bind-IsOpen="SidebarToggle" Target=".maincontent" EnablePersistence="true">
    <ChildContent>
        <div style="text-align: center;" class="text-content">Sidebar</div>
    </ChildContent>
</SfSidebar>

<div id="head">
    <SfAppBar>
        <SfButton class="e-icons e-menu" OnClick="Toggle"></SfButton>
    </SfAppBar>
</div>

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

@code {
    SfSidebar sidebarObj;
    public bool SidebarToggle = false;
    public void Toggle()
    {
        SidebarToggle = !SidebarToggle;
    }
}

<style>
    .maincontent {
        height: 665px;
    }
</style>