Syncfusion Blazor Sidebar

Implementing Syncfusion Blazor Sidebar Component

The Syncfusion Blazor Sidebar is a responsive navigation component that reserves screen space for navigation content. It supports multiple positioning modes, docking, state persistence, and integrates seamlessly with other Syncfusion components.

When to Use This Skill

Use this skill when you need to:

• Add a collapsible navigation sidebar to your Blazor application
• Control sidebar open/close state programmatically
• Enable responsive behavior based on screen resolution
• Show icons-only navigation (dock mode)
• Persist sidebar state across page navigation
• Display multiple sidebars with different positioning
• Target specific HTML elements for sidebar context
• Integrate ListView or TreeView components in sidebar
• Apply custom CSS styling to sidebar appearance
• Build responsive layouts in Blazor WebAssembly or .NET 8 apps

Key Component Properties

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• Installation across Visual Studio, VS Code, and .NET CLI
• NuGet package setup (Syncfusion.Blazor.Navigations, Syncfusion.Blazor.Themes)
• Namespace imports and service registration
• Theme stylesheet and script references
• Basic component rendering

Web App Setup (.NET 8)

📄 Read: references/web-app-setup.md

• Blazor Web App project creation
• Interactive render modes (Auto, Server, WebAssembly)
• Package installation for client projects
• Stylesheet and script references in App.razor
• Render mode directive usage

Open/Close Control

📄 Read: references/open-close-control.md

• IsOpen property and two-way binding with @bind-IsOpen
• Toggle methods for programmatic control
• Button-based sidebar toggling
• Combining multiple open/close triggers and standard event handling

Responsive & Docking Features

📄 Read: references/responsive-docking.md

• MediaQuery property for responsive behavior
• EnableDock property for icon-only navigation mode
• DockSize to control icon area width
• Icon styling and font-face setup
• Docking with ListItems and icon management

State Persistence & Target Context

📄 Read: references/state-persistence-targets.md

• EnablePersistence for localStorage support
• ID requirement for persistence to work
• Target property for sidebar context
• Applying sidebar to specific HTML elements
• Toolbar and AppBar integration

Styling & Animation

📄 Read: references/styling-customization.md

• Animation control using Animate property
• RTL (right-to-left) support using EnableRtl property
• CSS transitions and custom animation effects
• State-based styling and visual customization
• Backdrop customization and dock styling

Multiple Sidebars

📄 Read: references/multiple-sidebars.md

• Managing multiple sidebar instances
• Position property (Left/Right)
• e-main-content class for multi-sidebar layouts
• Left and right sidebar toggling
• Coordinating multiple sidebar states

Content Integration

📄 Read: references/content-integration.md

• Integrating ListView component in sidebar
• ListViewFieldSettings configuration
• TreeView integration for hierarchical menus
• Toolbar component integration
• MainLayout integration in .NET 8 apps

API Reference

📄 Read: references/api-reference.md

• Complete API documentation for SfSidebar component
• All 22 properties with descriptions and accepted values
• Methods and their return types
• Complete event system (Changed, Created, Destroyed, IsOpenChanged, OnClose, OnOpen)
• Event arguments (ChangeEventArgs, EventArgs)
• SfSidebarContainer documentation
• 9+ comprehensive usage examples with code
• Property use cases with practical implementations

---

Quick Start Example

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

<SfSidebar @ref="sidebarObj" Width="250px" @bind-IsOpen="SidebarToggle">
    <ChildContent>
        <div style="text-align: center; padding: 3rem;">
            <p>Sidebar Content</p>
            <SfButton @onclick="Close" CssClass="e-btn">Close</SfButton>
        </div>
    </ChildContent>
</SfSidebar>

<div style="padding: 3rem;">
    <div>Main Content</div>
    <SfButton @onclick="Toggle" IsToggle="true">Toggle Sidebar</SfButton>
</div>

@code {
    SfSidebar sidebarObj;
    public bool SidebarToggle = false;

    public void Toggle() => SidebarToggle = !SidebarToggle;
    public void Close() => SidebarToggle = false;
}

Common Implementation Patterns

Pattern 1: Basic Toggle Sidebar

Use IsOpen property with button click to show/hide sidebar.

Pattern 2: Responsive Sidebar

Use MediaQuery to automatically hide sidebar on mobile and show on desktop.

Pattern 3: Docked Navigation

Use EnableDock with DockSize for icon-only navigation that expands on hover/click.

Pattern 4: Persistent State

Use EnablePersistence + unique ID to remember sidebar state across page navigation.

Pattern 5: Target Property Behavior

• Implicit (Default): No Target property → sidebar targets next sibling element automatically
• Explicit (Advanced): Target=".selector" → requires inner wrapper `<div>` for CSS transforms
• ✓ Use implicit for most cases | Use explicit only for scoped layout control
• See State Persistence & Target Context for detailed patterns

Pattern 6: Sidebar with Menu

Combine with ListView or TreeView for structured navigation menus.

Pattern 7: Multiple Sidebars

Use Position property with left/right sidebars flanking main content.

---

Next Steps: 1. Choose your platform: WebAssembly or .NET 8 Web App 2. Follow the Getting Started guide for installation 3. Select features from the navigation guide above 4. Implement your sidebar with appropriate styling

For detailed examples and advanced scenarios, refer to individual reference files.

Syncfusion Blazor Sidebar API Reference

Table of Contents

• Overview
• Properties
• Methods
• Events
• Enumerations
• SidebarType
• SidebarPosition
• Event Arguments
• ChangeEventArgs
• EventArgs
• SfSidebarContainer
• Usage Examples
• Property Use Cases
• Related Components
• References

---

Overview

The Syncfusion Blazor Sidebar (SfSidebar) is a responsive navigation component that expands and collapses to show/hide primary or secondary content alongside the main content area. It supports multiple sidebar types, positioning, state persistence, and programmatic control.

---

Properties

---

Methods

Example: Using GetProperties() Method

@using Syncfusion.Blazor.Navigations

<SfSidebar @ref="sidebarObj" Width="250px" @bind-IsOpen="SidebarToggle">
    <ChildContent>
        <nav>Navigation Menu</nav>
    </ChildContent>
</SfSidebar>

<button @onclick="GetComponentProperties">Get Properties</button>

@code {
    SfSidebar sidebarObj;
    public bool SidebarToggle = false;

    private async Task GetComponentProperties()
    {
        var properties = await sidebarObj.GetProperties();
        
        foreach (var prop in properties)
        {
            Console.WriteLine($"{prop.Key}: {prop.Value}");
        }
    }
}

---

Events

---

Enumerations

SidebarType

Defines the behavior type for the sidebar component.

SidebarPosition

Defines the positioning of the sidebar.

---

Event Arguments

ChangeEventArgs

Provides data for the Changed event when the sidebar state has successfully transitioned.

Example: Handling ChangeEventArgs

@using Syncfusion.Blazor.Navigations

<SfSidebar @ref="sidebarObj" 
           Width="250px" 
           Changed="OnStateChanged"
           @bind-IsOpen="SidebarToggle">
    <ChildContent>
        <nav>Navigation Menu</nav>
    </ChildContent>
</SfSidebar>

@code {
    SfSidebar sidebarObj;
    public bool SidebarToggle = false;

    private void OnStateChanged(ChangeEventArgs args)
    {
        // Access the sidebar element reference
        var element = args.Element;
        
        // Check if user interaction triggered this or programmatic
        if (args.IsInteracted) 
        {
            Console.WriteLine("User triggered state change");
        }
        else
        {
            Console.WriteLine("Programmatic state change");
        }
        
        // Get event name
        Console.WriteLine($"Event name: {args.Name}");
    }
}

EventArgs

Base event arguments for OnOpen and OnClose events (fired before state change).

Example: Handling OnOpen and OnClose Events

@using Syncfusion.Blazor.Navigations

<SfSidebar @ref="sidebarObj" 
           Width="250px" 
           OnOpen="OnBeforeOpen"
           OnClose="OnBeforeClose"
           @bind-IsOpen="SidebarToggle">
    <ChildContent>
        <nav>Navigation Menu</nav>
    </ChildContent>
</SfSidebar>

@code {
    SfSidebar sidebarObj;
    public bool SidebarToggle = false;

    private void OnBeforeOpen(EventArgs args)
    {
        // Prevent opening if certain conditions are not met
        args.Cancel = false;
        
        // Check if user or programmatic
        if (!args.IsInteracted)
        {
            Console.WriteLine("Programmatic open triggered");
        }
        
        // Get interaction coordinates
        double? x = args.Left;
        double? y = args.Top;
        Console.WriteLine($"Click position - X: {x}, Y: {y}");
        
        // Get event name
        Console.WriteLine($"Event: {args.Name}");
    }

    private void OnBeforeClose(EventArgs args)
    {
        // Get the element reference
        var element = args.Element;
        
        // Prevent closing conditionally
        if (!args.IsInteracted)
        {
            args.Cancel = true;
            Console.WriteLine("Programmatic close prevented");
        }
    }
}

---

SfSidebarContainer

Parent container component for the Sidebar.

Properties

Example: Using SfSidebarContainer

@using Syncfusion.Blazor.Navigations

<SfSidebarContainer>
    <SfSidebar Width="250px" @bind-IsOpen="SidebarToggle">
        <ChildContent>
            <nav>Navigation Menu</nav>
        </ChildContent>
    </SfSidebar>

    <div>Main Content Area</div>
</SfSidebarContainer>

@code {
    public bool SidebarToggle = false;
}

---

Usage Examples

Basic Sidebar

@using Syncfusion.Blazor.Navigations

<SfSidebar @ref="sidebarObj" Width="250px" @bind-IsOpen="SidebarToggle">
    <ChildContent>
        <nav>Navigation Menu</nav>
    </ChildContent>
</SfSidebar>

@code {
    SfSidebar sidebarObj;
    public bool SidebarToggle = false;
}

Sidebar with Events

<SfSidebar @ref="sidebarObj" 
           Width="250px" 
           @bind-IsOpen="SidebarToggle"
           Type="SidebarType.Push"
           OnOpen="OnSidebarOpen"
           OnClose="OnSidebarClose"
           Changed="OnStateChanged">
    <ChildContent>
        <!-- Sidebar content -->
    </ChildContent>
</SfSidebar>

@code {
    private void OnSidebarOpen(EventArgs args) 
    { 
        // Handle sidebar open
    }
    
    private void OnSidebarClose(EventArgs args) 
    { 
        // Handle sidebar close
    }
    
    private void OnStateChanged(ChangeEventArgs args)
    {
        // Handle state change
    }
}

RTL Sidebar with Animation Control

<SfSidebar Width="250px" 
           EnableRtl="true" 
           Animate="false"
           @bind-IsOpen="SidebarToggle">
    <ChildContent>
        <!-- Content for RTL direction -->
    </ChildContent>
</SfSidebar>

Lifecycle Events Example

<SfSidebar @ref="sidebarObj" 
           Width="250px"
           Created="OnSidebarCreated"
           Destroyed="OnSidebarDestroyed"
           @bind-IsOpen="IsOpen">
    <ChildContent>
        <p>Sidebar with lifecycle events</p>
    </ChildContent>
</SfSidebar>

@code {
    private void OnSidebarCreated(object args)
    {
        Console.WriteLine("Sidebar initialized");
    }
    
    private void OnSidebarDestroyed(object args)
    {
        Console.WriteLine("Sidebar destroyed");
    }
}

Preventing Open/Close Actions

<SfSidebar Width="250px"
           OnOpen="OnBeforeOpen"
           OnClose="OnBeforeClose"
           @bind-IsOpen="IsOpen">
    <ChildContent>
        <p>Try closing the sidebar</p>
    </ChildContent>
</SfSidebar>

@code {
    private async Task OnBeforeOpen(EventArgs args)
    {
        // Allow opening
        args.Cancel = false;
        Console.WriteLine("Opening sidebar at position: X=" + args.Left + ", Y=" + args.Top);
    }
    
    private async Task OnBeforeClose(EventArgs args)
    {
        // Prevent closing if user didn't interact (programmatic)
        if (!args.IsInteracted)
        {
            args.Cancel = true;
            Console.WriteLine("Programmatic close prevented");
        }
    }
}

State Changed Event with User Interaction Detection

<SfSidebar Width="250px"
           Changed="OnStateChanged"
           @bind-IsOpen="IsOpen">
    <ChildContent>
        <p>Sidebar content</p>
    </ChildContent>
</SfSidebar>

@code {
    private void OnStateChanged(ChangeEventArgs args)
    {
        if (args.IsInteracted)
        {
            Console.WriteLine($"User triggered state change: {args.Name}");
        }
        else
        {
            Console.WriteLine($"Programmatic state change: {args.Name}");
        }
    }
}

Gesture Control on Mobile Example

<SfSidebar Width="250px"
           EnableGestures="true"
           Type="SidebarType.Over"
           @bind-IsOpen="IsOpen">
    <ChildContent>
        <p>Swipe left/right on mobile to toggle sidebar</p>
    </ChildContent>
</SfSidebar>

@code {
    public bool IsOpen = false;
}

Using Component ID with Persistence

<SfSidebar ID="mySidebar"
           Width="250px"
           EnablePersistence="true"
           @bind-IsOpen="IsOpen">
    <ChildContent>
        <!-- State will be restored on page reload -->
    </ChildContent>
</SfSidebar>

@code {
    public bool IsOpen = false;
}

Complete Advanced Example

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

<div style="display: flex; height: 100vh;">
    <SfSidebar @ref="sidebarObj"
               ID="advancedSidebar"
               Width="280px"
               Type="SidebarType.Push"
               Position="SidebarPosition.Left"
               EnablePersistence="true"
               EnableGestures="true"
               Animate="true"
               ShowBackdrop="true"
               CloseOnDocumentClick="true"
               @bind-IsOpen="IsOpen"
               Created="OnCreated"
               OnOpen="OnBeforeOpen"
               OnClose="OnBeforeClose"
               Changed="OnChanged">
        <ChildContent>
            <nav style="padding: 20px;">
                <h3>Navigation</h3>
                <ul>
                    <li><a href="#home">Home</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
                <SfButton @onclick="CloseSidebar">Close</SfButton>
            </nav>
        </ChildContent>
    </SfSidebar>

    <div style="flex: 1; padding: 20px;">
        <SfButton @onclick="ToggleSidebar">Toggle Sidebar</SfButton>
        <p>Main content area</p>
    </div>
</div>

@code {
    private SfSidebar sidebarObj;
    private bool IsOpen = false;
    private string logMessage = "";

    private void OnCreated(object args)
    {
        logMessage = "Sidebar created";
        Console.WriteLine(logMessage);
    }

    private void OnBeforeOpen(EventArgs args)
    {
        args.Cancel = false;
        logMessage = $"Before Open - User Interaction: {args.IsInteracted}";
    }

    private void OnBeforeClose(EventArgs args)
    {
        args.Cancel = false;
        logMessage = $"Before Close - User Interaction: {args.IsInteracted}";
    }

    private void OnChanged(ChangeEventArgs args)
    {
        logMessage = $"State Changed - New state: {IsOpen}";
    }

    private void ToggleSidebar()
    {
        IsOpen = !IsOpen;
    }

    private void CloseSidebar()
    {
        IsOpen = false;
    }
}

---

Property Use Cases

CloseOnDocumentClick

Auto-closes the sidebar when clicking outside the sidebar area. Useful for dismissing navigation on desktop when users click the main content.

@using Syncfusion.Blazor.Navigations

<div style="display: flex; height: 100vh;">
    <SfSidebar Width="250px" 
               Type="SidebarType.Over"
               CloseOnDocumentClick="true"
               @bind-IsOpen="IsOpen">
        <ChildContent>
            <nav style="padding: 20px;">
                <h3>Menu</h3>
                <ul>
                    <li><a href="#home">Home</a></li>
                    <li><a href="#about">About</a></li>
                </ul>
            </nav>
        </ChildContent>
    </SfSidebar>

    <div style="flex: 1; padding: 20px;">
        <button @onclick="@(() => IsOpen = !IsOpen)">Toggle Sidebar</button>
        <p>Click anywhere here to close the sidebar automatically</p>
    </div>
</div>

@code {
    private bool IsOpen = false;
}

EnableGestures

Enables swipe gestures on mobile/tablet devices to toggle the sidebar. Users can swipe left/right to expand/collapse without buttons.

@using Syncfusion.Blazor.Navigations

<div style="display: flex; height: 100vh;">
    <SfSidebar Width="250px" 
               Type="SidebarType.Over"
               EnableGestures="true"
               @bind-IsOpen="IsOpen">
        <ChildContent>
            <nav style="padding: 20px;">
                <h3>Navigation</h3>
                <ul>
                    <li><a href="#home">Home</a></li>
                    <li><a href="#products">Products</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
                <p style="margin-top: 30px; font-size: 12px; color: #999;">
                    💡 Swipe left/right on mobile to toggle
                </p>
            </nav>
        </ChildContent>
    </SfSidebar>

    <div style="flex: 1; padding: 20px;">
        <p>Swipe from the left edge (or tap the hamburger) to open navigation</p>
    </div>
</div>

@code {
    private bool IsOpen = false;
}

IsOpenChanged Event

Fires when @bind-IsOpen two-way binding value changes. Useful for tracking state changes and syncing with parent components.

@using Syncfusion.Blazor.Navigations

<div style="display: flex; height: 100vh;">
    <SfSidebar Width="250px" 
               IsOpenChanged="OnIsOpenChanged">
        <ChildContent>
            <nav style="padding: 20px;">
                <h3>Sidebar</h3>
            </nav>
        </ChildContent>
    </SfSidebar>

    <div style="flex: 1; padding: 20px;">
        <p style="color: #666;">Last event: @lastEvent</p>
    </div>
</div>

@code {
    private string lastEvent = "None";

    private async Task OnIsOpenChanged(bool newValue)
    {
        lastEvent = $"IsOpenChanged fired with value: {newValue}";
        await Task.CompletedTask;
    }
}

Width Property Variations

Demonstrates different width specifications for the sidebar (pixels, percentages, and auto).

@using Syncfusion.Blazor.Navigations

<div style="display: flex; gap: 20px; margin: 20px;">
    <div style="flex: 1; border: 1px solid #ccc; padding: 10px;">
        <h4>Width: 250px (Fixed Pixels)</h4>
        <SfSidebar Width="250px" @bind-IsOpen="IsOpen1">
            <ChildContent>
                <nav style="padding: 20px;">Fixed width sidebar</nav>
            </ChildContent>
        </SfSidebar>
    </div>

    <div style="flex: 1; border: 1px solid #ccc; padding: 10px;">
        <h4>Width: 30% (Percentage)</h4>
        <SfSidebar Width="30%" @bind-IsOpen="IsOpen2">
            <ChildContent>
                <nav style="padding: 20px;">Percentage-based width</nav>
            </ChildContent>
        </SfSidebar>
    </div>

    <div style="flex: 1; border: 1px solid #ccc; padding: 10px;">
        <h4>Width: auto (Content-based)</h4>
        <SfSidebar Width="auto" @bind-IsOpen="IsOpen3">
            <ChildContent>
                <nav style="padding: 20px;">Width: auto sidebar content</nav>
            </ChildContent>
        </SfSidebar>
    </div>
</div>

@code {
    private bool IsOpen1 = false;
    private bool IsOpen2 = false;
    private bool IsOpen3 = false;
}

ZIndex for Overlay Sidebar

Controls the CSS z-index for overlay sidebar types (Over, Slide). Higher z-index places sidebar above other elements.

@using Syncfusion.Blazor.Navigations

<div style="position: relative;">
    <!-- Backdrop with higher z-index than sidebar -->
    <div id="backdrop" style="display: @(IsOpen ? "block" : "none"); 
                              position: fixed; top: 0; left: 0; 
                              width: 100%; height: 100%; 
                              background: rgba(0,0,0,0.5); 
                              z-index: 999;"></div>

    <!-- Sidebar with z-index 1000 (default) -->
    <SfSidebar Width="300px" 
               Type="SidebarType.Over"
               ZIndex="1000"
               ShowBackdrop="true"
               @bind-IsOpen="IsOpen">
        <ChildContent>
            <nav style="padding: 20px;">
                <h3>Navigation</h3>
                <ul>
                    <li><a href="#home">Home</a></li>
                    <li><a href="#about">About</a></li>
                </ul>
            </nav>
        </ChildContent>
    </SfSidebar>

    <div style="padding: 20px;">
        <button @onclick="@(() => IsOpen = !IsOpen)">Toggle Sidebar (z-index: 1000)</button>
        <p>The sidebar floats above the backdrop due to higher z-index value</p>
    </div>
</div>

@code {
    private bool IsOpen = false;
}

HtmlAttributes for Custom Attributes

Adds additional HTML attributes such as data-*, aria-*, and custom attributes to the root element. Note: This property is deprecated—use @attributes directive instead.

@using Syncfusion.Blazor.Navigations

<div style="display: flex; height: 100vh;">
    <SfSidebar Width="250px" 
               HtmlAttributes="customAttributes"
               @bind-IsOpen="IsOpen">
        <ChildContent>
            <nav style="padding: 20px;">
                <h3>Accessible Navigation</h3>
                <ul>
                    <li><a href="#home">Home</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </nav>
        </ChildContent>
    </SfSidebar>

    <div style="flex: 1; padding: 20px;">
        <button @onclick="@(() => IsOpen = !IsOpen)">Toggle Sidebar</button>
        <p>This sidebar has custom data attributes for tracking and accessibility roles</p>
    </div>
</div>

@code {
    private bool IsOpen = false;

    private Dictionary<string, object> customAttributes = new Dictionary<string, object>
    {
        { "data-sidebar-id", "main-navigation" },
        { "data-region", "primary" },
        { "aria-label", "Main navigation menu" },
        { "role", "navigation" }
    };
}

Recommended Modern Approach with @attributes:

@using Syncfusion.Blazor.Navigations

<SfSidebar Width="250px" 
           @attributes="customAttributes"
           @bind-IsOpen="IsOpen">
    <ChildContent>
        <!-- Sidebar content -->
    </ChildContent>
</SfSidebar>

@code {
    private bool IsOpen = false;

    private Dictionary<string, object> customAttributes = new Dictionary<string, object>
    {
        { "data-sidebar-id", "main-navigation" },
        { "aria-label", "Main navigation menu" },
        { "role", "navigation" }
    };
}

---

Related Components

• SfSidebarContainer: Parent container for managing sidebar layout
• SfButton: For trigger buttons to control sidebar visibility
• SfListView: For hierarchical menu items in sidebar
• SfTreeView: For tree-based navigation structures

---

References

• Getting Started
• Open/Close Control
• Responsive & Docking Features
• State Persistence & Target Context
• Multiple Sidebars
• Content Integration
• Styling & Animation

For complete API documentation, visit Syncfusion Sidebar API Documentation

Content Integration with ListView, TreeView, and Toolbar

This guide covers integrating other Syncfusion components within the Sidebar for rich navigation experiences.

Table of Contents

• ListView Integration
• ListViewFieldSettings
• TreeView Integration
• Toolbar Integration
• MainLayout Integration

ListView Integration

Any HTML element can be placed in the Sidebar content area. Sidebar supports all types of HTML structures like TreeView, ListView, etc.

The Sidebar is commonly rendered with ListView component in its content area for menu-based navigation:

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

<SfSidebar @ref="sidebarObj" ID="sidebar" Type="@Type" Width="100%" @bind-IsOpen="SidebarToggle">
    <ChildContent>
        <div class="title1"> Menu </div>
        <div class="closebtn">
            <SfButton ID="close" @onclick="@Close" CssClass="e-btn close-btn">
                <ChildContent>
                    <span id="innerclose" class="e-icons close-icon"></span>
                </ChildContent>
            </SfButton>
        </div>
        <div id="listcontainer">
            <!-- Listview element declaration -->
            <SfListView DataSource="@Data" ID="list">
                <ListViewFieldSettings TValue="ListViewData" Id="Id" Text="Text"></ListViewFieldSettings>
            </SfListView>
        </div>
        <div class="sub-title">
            ListView component is placed inside the Sidebar content area.
        </div>
    </ChildContent>
</SfSidebar>

<!-- main content declaration -->
<div>
    <div class="title2">Main content</div>
    <div class="sub-title"> Click the button to open/close the Sidebar.</div>
    <div style="padding:20px" class="center-align">
        <SfButton ID="toggle" @onclick="@Toggle" IsToggle="true" CssClass="e-btn e-info">Toggle Sidebar</SfButton>
    </div>
</div>

@code{
    SfSidebar sidebarObj;
    public SidebarType Type = SidebarType.Over;
    
    List<ListViewData> Data = new List<ListViewData>()
    {
        new ListViewData{  Text = "Home", Id = "list-01"},
        new ListViewData{ Text = "Offers", Id = "list-02"},
        new ListViewData{ Text = "Support", Id = "list-03"},
        new ListViewData{ Text = "Logout", Id = "list-04"}
    };

    class ListViewData
    {
        public string Id { get; set; }
        public string Text { get; set; }
    }
    
    public bool SidebarToggle = false;
    
    public void Close()
    {
        SidebarToggle = false;
    }
    
    public void Toggle()
    {
        SidebarToggle = !SidebarToggle;
    }
}

<style>
    /* Listview element styles */
    #listcontainer {
        width: 100%;
    }

    #list {
        margin: 0 auto;
        width: 30%;
    }

    .e-listview .e-list-item {
        text-align: center;
        font-size: 14px;
        padding: 0;
    }
    
    /* Button element styles */
    .e-btn.close-btn :hover {
        box-shadow: none;
        background: transparent;
    }

    .close-btn, .e-listview .e-list-item, #sidebar {
        background-color: rgb(20, 118, 210);
        color: #ffffff;
    }

    .close-icon::before {
        content: '\e7e7';
    }

    .close-btn {
        box-shadow: none;
        border: none;
    }

    .close-btn:hover {
        color: #fafafa;
    }

    .e-icons.close-icon {
        line-height: 2.2;
    }

    .closebtn {
        top: 15px;
        line-height: 36px;
        height: 42px;
        color: black;
        position: absolute;
        right: 10px;
    }
    
    /* Sample level styles */
    .title1 {
        text-align: center;
        font-size: 20px;
        padding: 15px;
    }

    .title2 {
        text-align: center;
        font-size: 20px;
        padding: 15px;
    }

    .sub-title {
        text-align: center;
        font-size: 16px;
        padding: 10px;
    }

    .center-align {
        text-align: center;
        padding: 20px;
    }
</style>

ListViewFieldSettings

Configure ListView within Sidebar using ListViewFieldSettings:

• TValue: The data model type (e.g., ListViewData)
• Id: Property name for unique identifier
• Text: Property name for display text
• DataSource: Collection of items to display

<SfListView DataSource="@Data" ID="list">
    <ListViewFieldSettings TValue="ListViewData" 
        Id="Id" 
        Text="Text">
    </ListViewFieldSettings>
</SfListView>

@code {
    List<ListViewData> Data = new List<ListViewData>()
    {
        new ListViewData { Text = "Home", Id = "list-01" },
        new ListViewData { Text = "About", Id = "list-02" },
        new ListViewData { Text = "Services", Id = "list-03" }
    };

    class ListViewData
    {
        public string Id { get; set; }
        public string Text { get; set; }
    }
}

TreeView Integration

For hierarchical navigation, integrate TreeView component in Sidebar:

@using Syncfusion.Blazor.Navigations

<SfSidebar @bind-IsOpen="SidebarToggle" Width="290px">
    <ChildContent>
        <div class="sidebar-content">
            <SfTreeView CssClass="main-treeview" TValue="TreeData">
                <TreeViewFieldsSettings Id="NodeId" 
                    NavigateUrl="NavigateUrl" 
                    Text="NodeText" 
                    IconCss="IconCss" 
                    DataSource="TreeData" 
                    HasChildren="HasChild" 
                    ParentID="Pid">
                </TreeViewFieldsSettings>                            
            </SfTreeView>
        </div>
    </ChildContent>
</SfSidebar>

@code {
    public bool SidebarToggle = false;

    public class TreeData
    {
        public string NodeId { get; set; }
        public string NodeText { get; set; }
        public string IconCss { get; set; }
        public bool HasChild { get; set; }
        public string Pid { get; set; }
        public string NavigateUrl { get; set; }
    }
    
    private List<TreeData> TreeDataList = new List<TreeData>()
    {
        new TreeData { NodeId = "01", NodeText = "Home", IconCss = "icon-home" },
        new TreeData { NodeId = "02", NodeText = "About", IconCss = "icon-info" },
        new TreeData { NodeId = "03", NodeText = "Services", IconCss = "icon-services", HasChild = true },
        new TreeData { NodeId = "04", NodeText = "Consulting", Pid = "03", IconCss = "icon-consulting" },
        new TreeData { NodeId = "05", NodeText = "Development", Pid = "03", IconCss = "icon-development" }
    };
}

Toolbar Integration

Combine Sidebar with Toolbar for complete navigation solutions:

@using Syncfusion.Blazor.Navigations

<!-- Toolbar with menu button -->
<SfToolbar>
    <ToolbarItems>
        <ToolbarItem PrefixIcon="e-tbar-menu-icon" TooltipText="Menu" OnClick="Toggle"></ToolbarItem>
        <ToolbarItem>
            <Template>
                <div class="toolbar-title">Application Name</div>
            </Template>
        </ToolbarItem>
        <ToolbarItem PrefixIcon="e-tbar-settings-icon" TooltipText="Settings" Align="@ItemAlign.Right"></ToolbarItem>
    </ToolbarItems>
</SfToolbar>

<!-- Sidebar with Explicit Target -->
<SfSidebar @bind-IsOpen="SidebarToggle" Width="280px" Target=".main-content">
    <ChildContent>
        <nav class="sidebar-nav">
            <!-- Navigation items -->
        </nav>
    </ChildContent>
</SfSidebar>

<!-- Main content -->
<div class="main-content">                                    <!-- Explicit target -->
    <div>                                              <!-- ⚠️ REQUIRED: Inner wrapper for CSS transforms -->
        <!-- Page content -->
    </div>
</div>

@code {
    public bool SidebarToggle = false;

    public void Toggle()
    {
        SidebarToggle = !SidebarToggle;
    }
}

MainLayout Integration

For .NET 8 Blazor Web Apps, integrate Sidebar in MainLayout.razor using implicit targeting (recommended):

@using Syncfusion.Blazor.Navigations
@inherits LayoutComponentBase

<div class="page">
    <!-- Toolbar -->
    <SfToolbar>
        <ToolbarItems>
            <ToolbarItem PrefixIcon="e-tbar-menu-icon tb-icons" TooltipText="Menu" OnClick="@Toggle"></ToolbarItem>
            <ToolbarItem>
                <Template>
                    <div class="app-title">My Application</div>
                </Template>
            </ToolbarItem>
        </ToolbarItems>
    </SfToolbar>

    <!-- Sidebar Navigation (Implicit Targeting - No Target Property) -->
    <SfSidebar Width="290px" 
        MediaQuery="(min-width:600px)" 
        @bind-IsOpen="SidebarToggle">
        <ChildContent>
            <div class="sidebar-content">
                <SfTreeView CssClass="main-treeview" TValue="TreeData">
                    <TreeViewFieldsSettings Id="NodeId" 
                        Text="NodeText" 
                        IconCss="IconCss" 
                        DataSource="TreeDataSource" 
                        HasChildren="HasChild" 
                        ParentID="Pid">
                    </TreeViewFieldsSettings>                            
                </SfTreeView>
            </div>
        </ChildContent>
    </SfSidebar>

    <!-- Main Content (Automatically targets Sidebar by default) -->
    <main class="e-main-content">
        @Body
    </main>
</div>

@code {
    public bool SidebarToggle = false;

    public void Toggle()
    {
        SidebarToggle = !SidebarToggle;
    }

    public class TreeData
    {
        public string NodeId { get; set; }
        public string NodeText { get; set; }
        public string IconCss { get; set; }
        public bool HasChild { get; set; }
        public string Pid { get; set; }
    }

    private List<TreeData> TreeDataSource = new();

    protected override void OnInitialized()
    {
        base.OnInitialized();
        TreeDataSource = new List<TreeData>()
        {
            new TreeData { NodeId = "01", NodeText = "Dashboard", IconCss = "icon-dashboard" },
            new TreeData { NodeId = "02", NodeText = "Settings", IconCss = "icon-settings" },
            new TreeData { NodeId = "03", NodeText = "Help", IconCss = "icon-help" }
        };
    }
}

Integration Benefits:

• ListView for simple menu lists
• TreeView for hierarchical navigation structures
• Toolbar for consistent header navigation controls
• MainLayout integration for app-wide persistence
• Implicit targeting recommended for simplest MainLayout setup
• Explicit targeting only when scoping to specific containers
• Responsive behavior with MediaQuery
• Icon support for visual navigation

Getting Started with Blazor Sidebar

This guide covers installation and setup of the Syncfusion Blazor Sidebar component across Visual Studio, Visual Studio Code, and .NET CLI.

Table of Contents

• Visual Studio Setup
• Visual Studio Code Setup
• NET CLI Setup
• Namespaces and Service Registration
• Theme and Script Resources
• Basic Component Rendering
• Enable Backdrop

Visual Studio Setup

Prerequisites

• System requirements for Blazor components

Create a new Blazor App in Visual Studio

Create a Blazor WebAssembly App using Visual Studio via Microsoft Templates or the Syncfusion® Blazor Extension.

Install NuGet Packages

Open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search and install:

• Syncfusion.Blazor.Navigations
• Syncfusion.Blazor.Themes

Alternatively, run in Package Manager Console:

Install-Package Syncfusion.Blazor.Navigations -Version {{ site.releaseversion }}
Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}

Visual Studio Code Setup

Prerequisites

• System requirements for Blazor components

Create a new Blazor App in VS Code

Create a Blazor WebAssembly App using Visual Studio Code or run in integrated terminal:

dotnet new blazorwasm -o BlazorApp
cd BlazorApp

Install NuGet Packages

Press Ctrl+ to open integrated terminal. Ensure you're in project root directory where .csproj` is located:

dotnet add package Syncfusion.Blazor.Navigations -v {{ site.releaseversion }}
dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }}
dotnet restore

.NET CLI Setup

Prerequisites

Install latest .NET SDK. Check your version:

dotnet --version

Create a Blazor WebAssembly App

dotnet new blazorwasm -o BlazorApp
cd BlazorApp

Install NuGet Packages

dotnet add package Syncfusion.Blazor.Navigations -Version {{ site.releaseversion }}
dotnet add package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
dotnet restore

Namespaces and Service Registration

Add Import Namespaces

Open the ~/_Imports.razor file and add:

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

Register Syncfusion Blazor Service

In ~/Program.cs:

using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Syncfusion.Blazor;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

builder.Services.AddSyncfusionBlazor();
await builder.Build().RunAsync();

Theme and Script Resources

The theme stylesheet and script can be accessed from NuGet through Static Web Assets. Include stylesheet and script references within the <head> section of ~/index.html:

<head>
    ....
    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
</head>

Basic Component Rendering

Add the Syncfusion Blazor Sidebar component in ~/Pages/Index.razor:

<div id="header" style="height:45px;text-align: center;color:white;background-color:midnightblue;font-size:1.2rem;line-height:45px;">
    Header
</div>

<SfSidebar Width="250px">
    <ChildContent>
        <div style="text-align: center;" class="text-content"> Sidebar </div>
    </ChildContent>
</SfSidebar>

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

<style>
    .e-sidebar {
        background-color: #f8f8f8;
        color: black;
    }

    .text-content {
        font-size: 1.5rem;
        padding: 3rem;
    }
</style>

Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application.

Enable Backdrop

Enabling the ShowBackdrop property in the Sidebar component prevents the main content from user interactions:

<SfSidebar Width="250px" ShowBackdrop="true">
    <ChildContent>
        <div style="text-align: center;" class="text-content"> Sidebar </div>
    </ChildContent>
</SfSidebar>

The backdrop creates an overlay that blocks clicks and interactions on the main content while the sidebar is open, improving focus on the sidebar navigation.

Multiple Sidebars

This guide covers managing multiple sidebar instances with different positioning and coordination.

Table of Contents

• Multiple Sidebar Basics
• Position Property
• Left and Right Sidebars
• Main Content Container
• Managing Multiple States
• Complete Example

Multiple Sidebar Basics

Two or more sidebars can be initialized in a web page with the same main content. Sidebars can be positioned on the left or right side of the main content using the Position property.

This is useful for:

• Left sidebar for primary navigation
• Right sidebar for secondary navigation or tools
• Dual-panel layouts with collapsible navigation

Position Property

The Position property controls where the sidebar appears:

<!-- Left sidebar (default) -->
<SfSidebar Position="SidebarPosition.Left">
    <!-- Left navigation -->
</SfSidebar>

<!-- Right sidebar -->
<SfSidebar Position=SidebarPosition.Right">
    <!-- Right navigation -->
</SfSidebar>

Left and Right Sidebars

Here's how to set up one left and one right sidebar:

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

<div id="header" style="height:45px;text-align: center;color:white;background-color:midnightblue;font-size:1.2rem;line-height:45px;">
    Header
</div>

<!-- Left Sidebar -->
<SfSidebar @ref="leftSidebarInstance" Type=SidebarType.Push Width="250px" @bind-IsOpen="LeftToggle">
    <ChildContent>
        <div style="text-align: center;" class="text-content"> Left Sidebar</div>
    </ChildContent>
</SfSidebar>

<!-- Right Sidebar -->
<SfSidebar @ref="rightSidebarInstance" Width="250px" Position=SidebarPosition.Right @bind-IsOpen="RightToggle">
    <ChildContent>
        <div style="text-align: center;" class="text-content"> Right Sidebar</div>
    </ChildContent>
</SfSidebar>

<!-- Main Content -->
<div style="text-align:center" class="text-content e-main-content">
    <div>Main content</div>
    <div>
        <SfButton @onclick="ToggleLeftSidebar" IsToggle="true" CssClass="e-btn e-info">Left Toggle Sidebar</SfButton>
    </div>
    <div style="margin-top:10px">
        <SfButton @onclick="ToggleRightSidebar" IsToggle="true" CssClass="e-btn e-info">Right Toggle Sidebar</SfButton>
    </div>
</div>

@code {
    SfSidebar leftSidebarInstance;
    SfSidebar rightSidebarInstance;
    public bool LeftToggle = false;
    public bool RightToggle = false;

    public void ToggleLeftSidebar()
    {
        LeftToggle = !LeftToggle;
    }

    public void ToggleRightSidebar()
    {
        RightToggle = !RightToggle;
    }
}

<style>
    .e-sidebar {
        background-color: #f8f8f8;
        color: black;
    }

    .text-content {
        font-size: 1.5rem;
        padding: 3rem;
    }
</style>

Main Content Container

When using multiple sidebars, mark the main content area with the e-main-content class. This ensures both sidebars behave correctly as side content:

<!-- Correct: Main content with e-main-content class -->
<div class="e-main-content" style="text-align:center;">
    <div>Main content area</div>
</div>

<!-- Both sidebars will push/overlay this content appropriately -->
<SfSidebar>
    <!-- Left sidebar -->
</SfSidebar>

<SfSidebar Position=SidebarPosition.Right>
    <!-- Right sidebar -->
</SfSidebar>

Important: The HTML element with class name e-main-content will be considered as the main content. Both the sidebars will behave as side content to this main content area of a web page.

Managing Multiple States

Each sidebar has its own IsOpen state variable. Control them independently:

@code {
    // Sidebar references
    SfSidebar leftSidebarInstance;
    SfSidebar rightSidebarInstance;

    // Separate state for each sidebar
    public bool LeftToggle = false;  // Left sidebar state
    public bool RightToggle = false; // Right sidebar state

    // Toggle methods
    public void ToggleLeftSidebar()
    {
        LeftToggle = !LeftToggle;
    }

    public void ToggleRightSidebar()
    {
        RightToggle = !RightToggle;
    }

    // Close methods
    public void CloseLeftSidebar()
    {
        LeftToggle = false;
    }

    public void CloseRightSidebar()
    {
        RightToggle = false;
    }

    // Close all
    public void CloseAllSidebars()
    {
        LeftToggle = false;
        RightToggle = false;
    }
}

Complete Example

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

<div id="header" style="height:55px;text-align: center;color:white;background-color:midnightblue;padding-top:5px;">
    <SfButton @onclick="ToggleLeftSidebar" CssClass="e-btn">☰ Left</SfButton>
    <span style="margin-left: 40%;">Dashboard</span>
    <SfButton @onclick="ToggleRightSidebar" CssClass="e-btn" style="float:right;margin-right:10px;">Right ☰</SfButton>
</div>

<!-- Left Sidebar (Primary Navigation) -->
<SfSidebar @ref="leftSidebarInstance" Type="SidebarType.Push" Width="280px" @bind-IsOpen="LeftToggle">
    <ChildContent>
        <div style="padding: 20px;">
            <h5>Navigation</h5>
            <ul style="list-style-type: none; padding: 0;">
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#services">Services</a></li>
                <li><a href="#portfolio">Portfolio</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </div>
    </ChildContent>
</SfSidebar>

<!-- Right Sidebar (Tools/Settings) -->
<SfSidebar @ref="rightSidebarInstance" Type="SidebarType.Over" Width="250px" Position="SidebarPosition.Right" @bind-IsOpen="RightToggle">
    <ChildContent>
        <div style="padding: 20px;">
            <h5>Tools</h5>
            <ul style="list-style-type: none; padding: 0;">
                <li><a href="#settings">Settings</a></li>
                <li><a href="#profile">Profile</a></li>
                <li><a href="#notifications">Notifications</a></li>
                <li><a href="#logout">Logout</a></li>
            </ul>
        </div>
    </ChildContent>
</SfSidebar>

<!-- Main Content -->
<div class="e-main-content" style="min-height: calc(100vh - 60px); padding: 40px;">
    <h2>Welcome to Dashboard</h2>
    <p>Use the left and right sidebars to navigate through the application.</p>
    <p>Left sidebar for primary navigation, right sidebar for tools and settings.</p>
</div>

@code {
    SfSidebar leftSidebarInstance;
    SfSidebar rightSidebarInstance;
    public bool LeftToggle = false;
    public bool RightToggle = false;

    public void ToggleLeftSidebar() => LeftToggle = !LeftToggle;
    public void ToggleRightSidebar() => RightToggle = !RightToggle;
}

<style>
    .e-sidebar {
        background-color: #f5f5f5;
        color: #333;
        overflow-y: auto;
    }

    .e-sidebar ul { list-style: none; margin: 0; }
    .e-sidebar li { padding: 12px 15px; border-bottom: 1px solid #e0e0e0; }
    .e-sidebar a { color: #333; text-decoration: none; display: block; }
    .e-sidebar a:hover { background-color: #e0e0e0; padding-left: 20px; }

    .e-main-content {
        background-color: #fff;
        border-top: 1px solid #ddd;
    }

    h2, h5 { margin-top: 0; color: #1976d2; }
</style>

Key Points:

• Each sidebar requires its own @ref variable
• Each sidebar needs its own IsOpen binding variable
• Main content must have e-main-content class
• Use independent toggle methods for each sidebar
• Left sidebar is default; right uses Position="SidebarPosition.Right"
• Different Type values can be used (Push, Over, Slide, Auto)

Open and Close Sidebar Control

This guide covers controlling sidebar visibility programmatically using the IsOpen property and event handlers.

Table of Contents

• IsOpen Property
• Two-Way Binding
• Toggle Method
• Close Method
• Button-Based Control
• Multiple Trigger Points

IsOpen Property

The IsOpen property gets or sets a boolean value which indicates whether the Sidebar component's state is open or close.

⚠️ CRITICAL - Default Type is `Auto`:

By default, the Sidebar Type is set to Auto. When Type="Auto":

• Desktop: Sidebar is ALWAYS EXPANDED (Visible) - IsOpen value is IGNORED
• Mobile: Sidebar is ALWAYS COLLAPSED (Hidden) - IsOpen value is IGNORED

Example - Default Type="Auto" (IsOpen has NO effect):

<!-- Default Type="Auto" - IsOpen is ignored on desktop and mobile -->
<SfSidebar Width="250px" IsOpen="false">
    <ChildContent>
        <div>Desktop: ALWAYS Shows | Mobile: ALWAYS Hidden (Regardless of IsOpen)</div>
    </ChildContent>
</SfSidebar>

To Use IsOpen for Manual Control - Set Type Explicitly:

You must explicitly specify Type="Push", Type="Over", or Type="Slide" to have manual control over sidebar visibility using the IsOpen property:

<!-- Type="Push" - IsOpen works as expected on all devices -->
<SfSidebar Width="250px" Type="SidebarType.Push" IsOpen="false">
    <ChildContent>
        <div>Sidebar is HIDDEN on all devices</div>
    </ChildContent>
</SfSidebar>

<!-- Type="Over" - Full IsOpen control -->
<SfSidebar Width="250px" Type="SidebarType.Over" IsOpen="true">
    <ChildContent>
        <div>Sidebar is VISIBLE on all devices</div>
    </ChildContent>
</SfSidebar>

Two-Way Binding

The @bind-IsOpen directive works only when you explicitly set a Type other than Auto.

⚠️ With Default Type="Auto" - Binding Has NO Effect:

@using Syncfusion.Blazor.Navigations

<!-- Default Type="Auto" - @bind-IsOpen does NOTHING -->
<!-- Desktop: ALWAYS Expanded | Mobile: ALWAYS Collapsed -->
<SfSidebar @ref="sidebarObj" Width="250px" @bind-IsOpen="SidebarToggle">
    <ChildContent>
        <div style="text-align: center;" class="text-content">
            Desktop: Always Visible | Mobile: Always Hidden
            (SidebarToggle value: @SidebarToggle has NO effect)
        </div>
    </ChildContent>
</SfSidebar>

@code {
    SfSidebar sidebarObj;
    public bool SidebarToggle = false; // This does nothing with Type="Auto"
}

✓ For Binding to Work - Set Type Explicitly:

<!-- Type="Push" - @bind-IsOpen WORKS correctly -->
<SfSidebar @ref="sidebarObjPush" Width="250px" Type="SidebarType.Push" @bind-IsOpen="SidebarTogglePush">
    <ChildContent>
        <div style="text-align: center;" class="text-content">
            Sidebar state: @(SidebarTogglePush ? "Open" : "Closed")
        </div>
    </ChildContent>
</SfSidebar>

@code {
    SfSidebar sidebarObjPush;
    public bool SidebarTogglePush = false;
    
    // Now this boolean actually controls the sidebar
    // SidebarTogglePush = true  → Sidebar visible
    // SidebarTogglePush = false → Sidebar hidden
}

Toggle Method

Create a method to toggle the sidebar between open and closed states.

⚠️ With Default Type="Auto" - Toggle Methods Do NOT Work:

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

<!-- Default Type="Auto" - Toggle() has NO EFFECT -->
<!-- Desktop: ALWAYS Expanded | Mobile: ALWAYS Collapsed -->
<SfSidebar @ref="sidebarObj" Width="250px" @bind-IsOpen="SidebarToggle">
    <ChildContent>
        <div>Sidebar state cannot be changed with Toggle()</div>
    </ChildContent>
</SfSidebar>

<SfButton @onclick="Toggle">Toggle Button (Does Nothing)</SfButton>

@code {
    SfSidebar sidebarObj;
    public bool SidebarToggle = false;

    public void Toggle()
    {
        SidebarToggle = !SidebarToggle; // This has NO EFFECT with Type="Auto"
    }
}

✓ To Use Toggle - Set Type Explicitly:

<!-- Type="Push" - Toggle() WORKS correctly -->
<SfSidebar @ref="sidebarObjPush" Width="250px" Type="SidebarType.Push" @bind-IsOpen="SidebarTogglePush">
    <ChildContent>
        <div>Sidebar: @(SidebarTogglePush ? "Open" : "Closed")</div>
    </ChildContent>
</SfSidebar>

<SfButton @onclick="TogglePush" IsToggle="true">Toggle Sidebar (Works!)</SfButton>

@code {
    SfSidebar sidebarObjPush;
    public bool SidebarTogglePush = false;

    public void TogglePush()
    {
        SidebarTogglePush = !SidebarTogglePush; // Now this works!
    }
}

Close Method

Create a method to explicitly close the sidebar.

⚠️ With Default Type="Auto" - Close() Does NOT Work:

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

<!-- Default Type="Auto" - Close() has NO EFFECT -->
<!-- Desktop: ALWAYS Expanded | Mobile: ALWAYS Collapsed -->
<SfSidebar @ref="sidebarObj" Width="250px" @bind-IsOpen="SidebarToggle">
    <ChildContent>
        <div>Cannot be closed on desktop</div>
    </ChildContent>
</SfSidebar>

<SfButton @onclick="Close">Close Button (Does Nothing)</SfButton>

@code {
    SfSidebar sidebarObj;
    public bool SidebarToggle = false;

    public void Close()
    {
        SidebarToggle = false; // This has NO EFFECT with Type="Auto"
    }
}

✓ To Use Close - Set Type Explicitly:

<!-- Type="Push" - Close() WORKS correctly -->
<SfSidebar @ref="sidebarObjPush" Width="250px" Type="SidebarType.Push" @bind-IsOpen="SidebarTogglePush">
    <ChildContent>
        <div>Sidebar can be closed</div>
    </ChildContent>
</SfSidebar>

<SfButton @onclick="ClosePush">Close Sidebar (Works!)</SfButton>

@code {
    SfSidebar sidebarObjPush;
    public bool SidebarTogglePush = false;

    public void ClosePush()
    {
        SidebarTogglePush = false; // Now this works!
    }
}

Button-Based Control

Implement sidebar control with buttons.

⚠️ WITH DEFAULT Type="Auto" - Buttons Do NOT Work:

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

<div id="header" style="height:45px;text-align: center;color:white;background-color:midnightblue;font-size:1.2rem;line-height:45px;">
    Header
</div>

<!-- Default Type="Auto" -->
<!-- Desktop: ALWAYS EXPANDED | Mobile: ALWAYS COLLAPSED -->
<!-- Buttons have NO EFFECT -->
<SfSidebar @ref="sidebarObj" Width="250px" @bind-IsOpen="SidebarToggle">
    <ChildContent>
        <div style="text-align: center;" class="text-content">
            <span>Sidebar Content</span>
            <span>
                <SfButton @onclick="Close" CssClass="e-btn close-btn">Close Button (Does Nothing)</SfButton>
            </span>
        </div>
    </ChildContent>
</SfSidebar>

<div class="text-content" style="text-align: center;">
    <div>Main content</div>
    <div>
        <SfButton @onclick="Toggle" IsToggle="true" CssClass="e-btn e-info">Toggle Button (Does Nothing)</SfButton>
    </div>
</div>

@code{
    SfSidebar sidebarObj;
    public bool SidebarToggle = false;

    public void Close() => SidebarToggle = false;    // NO EFFECT
    public void Toggle() => SidebarToggle = !SidebarToggle;  // NO EFFECT
}

✓ FOR WORKING BUTTONS - Set Type Explicitly:

<!-- Type="Push" - Buttons WORK correctly -->
<SfSidebar @ref="sidebarObjPush" Width="250px" Type="SidebarType.Push" @bind-IsOpen="SidebarTogglePush">
    <ChildContent>
        <div style="text-align: center;" class="text-content">
            <span>Sidebar: @(SidebarTogglePush ? "Open" : "Closed")</span>
            <span>
                <SfButton @onclick="ClosePush" CssClass="e-btn close-btn">Close Sidebar</SfButton>
            </span>
        </div>
    </ChildContent>
</SfSidebar>

<SfButton @onclick="TogglePush" IsToggle="true" CssClass="e-btn e-info">Toggle Sidebar</SfButton>

@code{
    SfSidebar sidebarObjPush;
    public bool SidebarTogglePush = false;

    public void ClosePush() => SidebarTogglePush = false;      // Works!
    public void TogglePush() => SidebarTogglePush = !SidebarTogglePush;  // Works!
}

Multiple Trigger Points

Control the sidebar from multiple locations in your layout.

⚠️ WITH DEFAULT Type="Auto" - ALL Buttons Do NOT Work:

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

<!-- Header with menu button (Does Nothing) -->
<div id="header" style="height:45px;text-align: center;color:white;background-color:midnightblue;font-size:1.2rem;line-height:45px;">
    <SfButton @onclick="Toggle" CssClass="e-btn header-toggle">☰ Menu (Does Nothing)</SfButton>
</div>

<!-- Default Type="Auto" - ALWAYS EXPANDED on desktop, ALWAYS COLLAPSED on mobile -->
<SfSidebar @ref="sidebarObj" Width="250px" @bind-IsOpen="SidebarToggle">
    <ChildContent>
        <nav class="sidebar-nav">
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><SfButton @onclick="Close" CssClass="e-btn close-btn">Close Button (Does Nothing)</SfButton></li>
            </ul>
        </nav>
    </ChildContent>
</SfSidebar>

<!-- Main Content -->
<div class="main-content" style="padding: 3rem;">
    <div style="text-align: center;">
        <p>Desktop: Sidebar Always Visible</p>
        <SfButton @onclick="Toggle" CssClass="e-btn e-info">Toggle Button (Does Nothing)</SfButton>
    </div>
</div>

@code{
    SfSidebar sidebarObj;
    public bool SidebarToggle = false;

    public void Toggle() => SidebarToggle = !SidebarToggle;  // NO EFFECT
    public void Close() => SidebarToggle = false;            // NO EFFECT
}

✓ FOR WORKING MULTI-TRIGGER PATTERN - Set Type Explicitly:

<!-- Type="Push" - Multiple buttons work correctly -->
<SfSidebar @ref="sidebarObjPush" Width="250px" Type="SidebarType.Push" @bind-IsOpen="SidebarTogglePush">
    <ChildContent>
        <nav class="sidebar-nav">
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><SfButton @onclick="ClosePush" CssClass="e-btn close-btn">Close Sidebar</SfButton></li>
            </ul>
        </nav>
    </ChildContent>
</SfSidebar>

<!-- Main Content with multiple trigger points -->
<div class="main-content" style="padding: 3rem;">
    <SfButton @onclick="TogglePush">Toggle Sidebar (Header)</SfButton>
    <SfButton @onclick="ClosePush">Close Sidebar (Main)</SfButton>
</div>

@code {
    SfSidebar sidebarObjPush;
    public bool SidebarTogglePush = false;

    public void TogglePush() => SidebarTogglePush = !SidebarTogglePush;  // Works!
    public void ClosePush() => SidebarTogglePush = false;                // Works!
}

Key Points:

• ⚠️ CRITICAL: Default Type is `Auto` - All above methods have NO EFFECT with default type:
• IsOpen=false will NOT hide the sidebar on desktop
• IsOpen=true will NOT show the sidebar on mobile
• Toggle(), Close(), and @bind-IsOpen binding do NOTHING
• Button click handlers do NOTHING

• With Type="Auto" (default):
• Desktop: Sidebar is ALWAYS EXPANDED/VISIBLE regardless of IsOpen value
• Mobile: Sidebar is ALWAYS COLLAPSED/HIDDEN regardless of IsOpen value

• With Explicit Type (`"Push"`, `"Over"`, `"Slide"`):
• IsOpen property controls visibility on all devices
• @bind-IsOpen="variable" bindings work correctly
• Toggle() and Close() methods work correctly
• Button handlers work correctly

• Best Practice: Always explicitly set Type if you need to programmatically control sidebar visibility

Responsive Sidebar and Docking Features

This guide covers responsive sidebar behavior using MediaQuery and docking with icon-only navigation mode.

Table of Contents

• MediaQuery for Responsive Behavior
• Sidebar Docking
• DockSize Configuration
• Icon-Based Navigation
• Combined Responsive and Dock

MediaQuery for Responsive Behavior

The MediaQuery property enables automatic sidebar visibility changes based on screen resolution. This creates responsive layouts that adapt to different device sizes.

Desktop-Only Sidebar

Display sidebar only on screens wider than 600px:

@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;">☰</span>
    <span style="margin-left:45%;">Header</span>
</div>

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

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

<style>
    .e-sidebar {
        background-color: #f8f8f8;
        color: black;
    }

    .text-content {
        font-size: 1.5rem;
        padding: 3rem;
    }
</style>

How MediaQuery Works

• When condition is true (e.g., screen width ≥ 600px): Sidebar renders normally
• When condition is false (e.g., screen width < 600px): Sidebar is hidden

This approach automatically hides the sidebar on mobile devices and shows it on tablets and desktops without JavaScript.

Sidebar Docking

The EnableDock property creates a persistent docked area that remains visible when the sidebar is collapsed. This is ideal for icon-based navigation.

Basic Dock Setup

@using Syncfusion.Blazor.Navigations

<div id="header" style="height:55px;text-align: center;color:white;background-color: midnightblue;font-size:1.5rem;line-height:55px;">
    Header
</div>

<SfSidebar @ref="sidebarObj" Width="220px" DockSize="72px" EnableDock=true @bind-IsOpen="SidebarToggle">
    <ChildContent>
        <div class="dock">
            <ul>
                <li class="sidebar-item" id="toggle" @onclick="Toggle">
                    <span class="e-icons expand"></span>
                    <span class="e-text" title="menu">Menu</span>
                </li>
                <li class="sidebar-item">
                    <span class="e-icons home"></span>
                    <span class="e-text" title="home">Home</span>
                </li>
                <li class="sidebar-item">
                    <span class="e-icons profile"></span>
                    <span class="e-text" title="profile">Profile</span>
                </li>
                <li class="sidebar-item">
                    <span class="e-icons info"></span>
                    <span class="e-text" title="info">Info</span>
                </li>
                <li class="sidebar-item">
                    <span class="e-icons settings"></span>
                    <span class="e-text" title="settings">Settings</span>
                </li>
            </ul>
        </div>
    </ChildContent>
</SfSidebar>

<div id="main-content container-fluid col-md-12" style="margin-top: 10%;">
    <div class="title default" style="text-align: center">Main content</div>
</div>

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

<style>
    /* Content area styles */
    .title {
        font-size: 20px;
    }

    /* Sidebar styles */
    .e-sidebar .e-icons::before {
        font-size: 25px;
    }

    /* dockbar icon styles */
    .e-sidebar .home::before {
        content: '\e102';
        font-family: 'e-dock-icons';
    }

    .e-sidebar .profile::before {
        content: '\e10c';
        font-family: 'e-dock-icons';
    }

    .e-sidebar .info::before {
        content: '\e11b';
        font-family: 'e-dock-icons';
    }

    .e-sidebar .settings::before {
        content: '\e10b';
        font-family: 'e-dock-icons';
    }

    .e-sidebar .expand::before,
    .e-sidebar.e-right.e-open .expand::before {
        content: '\e10f';
        font-family: 'e-dock-icons';
    }

    .e-sidebar.e-open .expand::before,
    .e-sidebar.e-right .expand::before {
        content: '\e10e';
        font-family: 'e-dock-icons';
    }

    /* Hide text when docked and closed */
    .e-sidebar.e-dock.e-close span.e-text {
        display: none;
    }

    .e-sidebar.e-dock.e-open span.e-text {
        display: inline-block;
    }

    .e-sidebar li {
        list-style-type: none;
        cursor: pointer;
    }

    .e-sidebar ul {
        padding: 0px;
    }

    .e-sidebar span.e-icons {
        color: #c0c2c5;
        line-height: 2
    }

    .e-open .e-icons {
        margin-right: 16px;
    }

    .e-open .e-text {
        overflow: hidden;
        font-size: 15px;
    }

    .sidebar-item {
        text-align: center;
        border-bottom: 1px #e5e5e58a solid;
    }

    .e-sidebar.e-open .sidebar-item {
        text-align: left;
        padding-left: 15px;
        color: #c0c2c5;
    }

    .e-sidebar {
        background: #2d323e;
        overflow: hidden;
    }

    @@font-face {
        font-family: 'e-dock-icons';
        src: url(data:application/x-font-ttf;charset=utf-8;base64,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AG0AAAAAAgAAAAAAAAAKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAjAQIBAwEEAQUBBgEHAQgBCQEKAQsBDAENAQ4BDwEQAREBEgETARQBFQEWARcBGAEZARoBGwEcAR0BHgEfASABIQEiASMBJAAQVGV4dF9PdXRkZW50XzAwMQtQaWN0dXJlXzAwMQxTZXR0aW5nc18wMDEQQ29sb3JfcGlja2VyXzAwMhBBbGlnbl9DZW50ZXJfMDA2CExpbmVfMDAxDVVuZGVybGluZV8wMDEMU29ydF9aLUFfMDAxCFVuZG9fMDAxEENoYXJ0X2J1YmJsZV8wMDELRG93bmxvYWRfMDAPVGV4dF9pbmRlbnRfMDAxEkNoYXJ0X0RvdWdobnV0XzAwMQlDbGVhcl8wMDINTnVtYmVyaW5nXzAwMQxTb3J0X0EtWl8wMDEKSXRhbGljXzAwMQtCdWxsZXRzXzAwMQlQYXN0ZV8wMDEIUmVkb18wMDEPQ2hhcnRfcmFkYXJfMDAxD0FsaWduX1JpZ2h0XzAwMQlUYWJsZV8wMDEOQWxpZ25fTGVmdF8wMDEITWVudV8wMDEHQ3V0XzAwMghCb2xkXzAwMRFBbGlnbl9KdXN0aWZ5XzAwMQpSZWxvYWRfMDAxClNlYXJjaF8wMDEKVXBsb2FkXzAwMQpEZXNpZ25fMDA1CkV4cG9ydF8wMDEIQ29weV8wMDIAAA==) format('truetype');
        font-weight: normal;
        font-style: normal;
    }
</style>

DockSize Configuration

The DockSize property sets the width of the docked area when the sidebar is collapsed in dock mode.

<!-- 72px dock area with 220px full sidebar width -->
<SfSidebar Width="220px" DockSize="72px" EnableDock="true">
    <!-- Icon-based content -->
</SfSidebar>

<!-- Different dock sizes -->
<SfSidebar Width="200px" DockSize="60px" EnableDock="true">
    <!-- Small dock area -->
</SfSidebar>

<SfSidebar Width="300px" DockSize="100px" EnableDock="true">
    <!-- Large dock area -->
</SfSidebar>

Icon-Based Navigation

When using docking, text is hidden and only icons display in the docked state:

Collapsed state (DockSize):

• Only icons visible
• Width = DockSize value
• Hover/click to expand

Expanded state (IsOpen=true):

• Icons + text labels visible
• Width = full sidebar Width
• Complete navigation items

This pattern creates a modern, space-efficient navigation experience common in professional applications.

Combined Responsive and Dock

Combine MediaQuery with EnableDock for a complete responsive solution:

<SfSidebar 
    Width="250px" 
    DockSize="72px" 
    EnableDock="true"
    MediaQuery="(min-width: 900px)"
    @bind-IsOpen="SidebarToggle">
    <!-- Navigation content -->
</SfSidebar>

This configuration:

• Shows full sidebar only on screens ≥ 900px
• Shows docked version on medium screens
• Hides completely on mobile

State Persistence and Custom Context Targeting

This guide covers persisting sidebar state across page navigation and targeting specific HTML elements for sidebar context.

Table of Contents

• State Persistence
• EnablePersistence Property
• localStorage Behavior
• Custom Context with Target
• Target Property Usage
• Combining Persistence and Target

State Persistence

State persistence allows the Sidebar 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 defaults to false.

EnablePersistence Property

When EnablePersistence is set to true, the IsOpen property value of the Sidebar component will be retained even after page refresh.

@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>

ID Requirement

Important: The Sidebar component's ID is essential for enabling state persistence. The persisted data is stored and retrieved based on the component's ID.

<!-- Without ID - persistence won't work -->
<SfSidebar EnablePersistence="true">
    <!-- Content -->
</SfSidebar>

<!-- With ID - persistence works correctly -->
<SfSidebar ID="MySidebar" EnablePersistence="true">
    <!-- Content -->
</SfSidebar>

localStorage Behavior

When persistence is enabled: 1. User changes sidebar state (open/close) 2. State is saved to browser's localStorage 3. On page refresh or navigation, sidebar restores the saved state 4. Key in localStorage: Component's ID value

This provides a seamless experience where sidebar preference persists across user sessions.

Custom Context with Target

By default, Blazor Sidebar initializes context to the body element. Using the Target property, you can set context element to initialize Sidebar inside any HTML element apart from the body element.

The Target property controls which element is affected when the sidebar expands/collapses. There are two distinct modes:

Target Property Behavior - Implicit vs Explicit

Implicit Targeting (Recommended - Default Behavior)

No `Target` property is specified. The sidebar automatically targets the next sibling `<div>` element:

<SfSidebar ID="Sidebar">
    <ChildContent>
        <div style="text-align: center;" class="text-content">Sidebar</div>
    </ChildContent>
</SfSidebar>

<div> <!-- Automatically becomes target - no wrapper needed -->
    Main Content
</div>

Explicit Targeting (Advanced - When You Need Control)

Use the `Target="'.selector'"` property to explicitly specify which element to affect:

<SfSidebar ID="Sidebar" Target=".maincontent">
    <ChildContent>
        <div style="text-align: center;" class="text-content">Sidebar</div>
    </ChildContent>
</SfSidebar>

<div class="maincontent">              <!-- Explicit target -->
  <div>                              <!-- ⚠️ REQUIRED: Inner wrapper -->
    <div class="content">Main Content</div>
  </div>
</div>

⚠️ IMPORTANT: When using explicit Target, you MUST include an inner wrapper `<div>` inside the target container for CSS transforms to work correctly.

Target Property Usage - Practical Examples

@using Syncfusion.Blazor.Navigations

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

<div id="head">
    <SfToolbar>
        <ToolbarItems>
            <ToolbarItem PrefixIcon="e-tbar-menu-icon tb-icons" TooltipText="Menu" OnClick="Toggle"></ToolbarItem>
            <ToolbarItem Align="@ItemAlign.Center">
                <Template>
                    <div class="e-folder">
                        <div class="e-folder-name">Header</div>
                    </div>
                </Template>
            </ToolbarItem>
            <ToolbarItem PrefixIcon="e-tbar-search-icon tb-icons" TooltipText="Search" Align="@ItemAlign.Right">
            </ToolbarItem>
            <ToolbarItem PrefixIcon="e-tbar-settings-icon tb-icons" TooltipText="Popup" Align="@ItemAlign.Right">
            </ToolbarItem>
        </ToolbarItems>
    </SfToolbar>
</div>

<div class="maincontent">                            <!-- Explicit target -->
  <div>                                          <!-- ⚠️ REQUIRED: Inner wrapper for CSS transforms -->
    <div class="text-content" style="text-align: center;">Main Content</div>
  </div>
</div>

<div class="footer" style="height:35px; width:100%;text-align:center;line-height: 35px;font-size:15px;">
    <span style="float:right; margin-right:15px;">&copy; copyrights</span>
</div>

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

<style>

    /* Sidebar styles  */
    .e-sidebar {
        background-color: #bbbbbb;
        color: black;
    }

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

    @@font-face {
        font-family: 'Material_toolbar';
        src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj1tShMAAAEoAAAAVmNtYXBoMOjqAAACDAAAAHhnbHlmIuy19QAAAswAACNMaGVhZA6okZMAAADQAAAANmhoZWEIUQQkAAAArAAAACRobXR4jAAAAAAAAYAAAACMbG9jYYc0kUIAAAKEAAAASG1heHABOwG8AAABCAAAACBuYW1lx/RZbQAAJhgAAAKRcG9zdJZeEVUAACisAAACGAABAAAEAAAAAFwEAAAAAAAD9AABAAAAAAAAAAAAAAAAAAAAIwABAAAAAQAAAQsu/F8PPPUACwQAAAAAANXLJlEAAAAA1csmUQAAAAAD9AP0AAAACAACAAAAAAAAAAEAAAAjAbAADgAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQQAAZAABQAAAokCzAAAAI8CiQLMAAAB6wAyAQgAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wDnIQQAAAAAXAQAAAAAAAABAAAAAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAAAAACAAAAAwAAABQAAwABAAAAFAAEAGQAAAAEAAQAAQAA5yH//wAA5yD//wAAAAEABAAAAAEAAgADAAQABQAGAAcACAAJAAoACwAMAA0ADgAPABAAEQASABMAFAAVABYAFwAYABkAGgAbABwAHQAeAB8AIAAhACIAAAAAADIAjgFwAfgCIAKYAxIDSAO2BRYFMAVcBnIGugb2ByoHQgguCNYJRgn6CiQKiAquCsgMFgzADOYNzg7WDvAQyBEyEaYABwAAAAAD9APzAAMABwAKAA4AEgAVABkAADchNSElITUhJTkBBSE1ITUhNSEFFxEnITUhDAPo/BgBtgIy/c7+SgG2AjL9zgIy/c7+Svr6A+j8GAxefV67Pl19Xvr6AfScXgAAAAIAAAAAA/QD9AAEAEgAACUhNxc3AREfDyE/DxEvDyEPDgOF/PbDisP9gQEBAwQEBgYICAgJCgoLCwsDCgsLCwoKCQgICAYGBAQDAQEBAQMEBAYGCAgICQoKCwsL/PYLCwsKCgkICAgGBgQEAwGz+qf6AYX89gsLCwoKCQgICAYGBAQDAQEBAQMEBAYGCAgICQoKCwsLAwoLCwsKCgkICAgGBgQEAwEBAQEDBAQGBggICAkKCgsLAAACAAAAAAPzA/QAQAC/AAABFQ8PLw8/Dx8OAQ8ELwErAQ8FFR8FBxcPAxUfBzsBNx8LOwI/Cx8BOwE/Bj0BLwQ/Aic/BC8HKwEHLwsrAg8FArIBAgUGBwkKDAwODxAQERITEhIREQ8PDgwMCgkHBgUCAQECBQYHCQoMDA4PDxEREhITEhEQEA8ODAwKCQcGBQL+zxUWFhUWfwUFBAUDBANqAgEBAgIDbgMDbwMCAQEBAmkDBAQEBQSEFBYWFxQCAgIDBAQEBcwFBAQEAwICAhQXFRYVgAQFBQQEAwNoAgEBAgIDcAEBAQNvAgIBAQEBA2gDBAQFBAWDFBYWFxIBAgMDAwQFBcwFBAQDBAICAgAJCRIQEBAODgwLCgkHBgQDAQEDBAYHCQoLDA4OEBAQEhISEhAQEA4ODAsKCQcGBAMBAQMEBgcJCgsMDg4QEBASAc6ECwwNDjIBAQICA7QEBQQFBAMEUjIyVgMEBAQFBAWwAwICATMODQwLhAQEBAMCAgECAgIDBAMEhAsMDQ4yAQECAgOwBAQFBAUEAwRSDAwaMlYDBAQEBQQFsAMCAgEzDg0MC4QEAwQDAgICAgICAwQDAAAAAAMAAAAAA/MD2AAyADUAaQAAJRUfDTsBPw41LwgPBwMhAScXAQ8GHQEfBQEfBjsBPwYBPwYvBwEDFgIDBAQGBgcICQkKCgsLCwsLCwoKCQgICAYGBAQDAQEDBAcMCQoLFCMtFQoJCQcFBHv96gEL04X+4gYFBAQCAgICAgIEBAUBNwcHBwgHCAcIBwgHCAgHBwYBOAUEAwMCAQEBAQIDAwQFBv4PlwsLCwoKCQkIBwYGBAQDAgIDBAQGBgcICQkKCgsLCwcPEBAYEBAPHCk3HRAQEBAQEAEIAQrThf7iBgcIBwgHCAgICAgHBwcH/skGBQQEAwIBAQIDBAQFBgE3BwcHBwgICAgHCAgHCAcGAfEABQAAAAAD9APzAAMABwALAA8AEwAANyE1ITchNSEnITUhNyE1ISchNSEMA+j8GN4CLP3U3gPo/BjeAiz91N4D6PwYDF6AW5xefVqAXgAAAAAEAAAAAAP0A/QACQATABcAWwAAAQcVMzcXMzUjLwEjFTMbATM1IwElESERBxEfDyE/DxEvDyEPDgFro8ObnnROxOp0nZvqTij+8AGW/NReAQEDBAQGBggICAkKCgsLCwMKCwsLCgoJCAgIBgYEBAMBAQEBAwQEBgYICAgJCgoLCwv89gsLCwoKCQgICAYGBAQDAQENAyOWliO4BSUBK/7VJQFSffzUAywR/PYLCwsKCgkICAgGBgQEAwEBAQEDBAQGBggICAkKCgsLCwMKCwsLCgoJCAgIBgYEBAMBAQEBAwQEBgYICAgJCgoLCwAAAAACAAAAAAOWA/QAAwBpAAA3ITUhExUfHTsBPx01ESMRDw8vDxEjagMs/NRKAgIDAwUFBgcHCAkJCgsLCwwNDQ0ODw4PEA8QERAREREREBEQDxAPDg8ODQ0NDAsLCwoJCQgHBwYFBQMDAgKLAQMFBggKCwwODxARERMTFBQTExEREA8ODAsFCQcGBAKLDH0BsBEREREQEA8QDg8ODg0MDQsLCwoJCQgHBwYFBQQDAgEBAgMEBQUGBggICQkKCgsMDAwNDg4ODw8PEBAQERERAb7+RRQTEhIREA8NDQsKCAYFAwEBAwUGCAoLDQ0PCBASEhMTAcUABQAAAAAD9APXAAIABQANABcAGgAAJTcjASM3ATM3MxczAyMFIQEVITUhATUhJTMnAgJx4wG/vl/+/Fot+i1a3FD9RgEg/t4Bov7UAST+aAF/6XQobQET//47eHgCM07+XD5NAaQ/UHMAAAAAAQAAAAAD9ALoAF8AABMhJz8PHxo3Lx8PDycMAbWyDQ0ODg8PDxAQEBERERIREhAQEBAQDw8PDw4ODg0NDQwMFxYTEhAHBgYGBXUHBwgJCQoLCwwNDQ0PDg8QEBERERITEhMUExQVFBUVFRgYFxcXFhYVFhQUFBMTEhGwARi6CwsJCggICAYGBgQEAwIBAQEBAgIDBAQFBQYHBwgICQkKFRYYGhsODg8PDygUFBMTEhISERARDw8PDg0NDAsLCgoICAgGBgQEAwMBAQECAwQFBgcJCQoLDA0ODg+6AAYAAAAAA/MD9AA/AGsAqwDrAO8BMwAAARUfDTsBPw09AS8ODw4lHwk7AT8IPQEvByMnByMPByUfDz8PLw8PDiUfDz8OPQEvDSsBDw0lESERBxEfDyE/DxEvDyEPDgHhAgMFBQYHCAkKCgsLDA0NDA0MCwsKCgkIBwYFBQMCAgMFBQYHCAkKCgsLDA0MDQ0MCwsKCgkIBwYFBQMC/scBAQEFBwgKCwYGBwYGBgwKCAcFAQEBAQUHCAoMBgYGBwYGCwoIBwUBAQHzAQECBAQEBgYGCAcICQkJCgoJCQgJBwgGBgYEBAMDAQEBAQMDBAQGBgYIBwkICQkKCgkJCQgHCAYGBgQEBAIB/qgBAQMEBAYGBwgICQoKCgsLCwsLCgkJCQcHBwUFAwMCAgMDBQUHBwcJCQkKCwsLCwsKCgoJCAgHBgYEBAMBAlD81F4BAQMDBAUGBgcHCAkJCQkKAyYKCQkJCQgHBwYGBQQEAgEBAQECBAQFBgYHBwgJCQkJCvzaCgkJCQkIBwcGBgUEAwMBAWQNDAwMCwoKCQgHBgUFAwICAwUFBgcICQoKCwwMDA0NDAwLCwsJCQgHBwUEAwIBAQIDBAUHBwgJCQsLCwwMMQYGBgsKCQcEAgEBAgQHCQoLBgYGBwYGCwoJBgUCAQECBQYJCgsGBvMJCgkICAgHBwYFBQQDAwEBAQEDAwQFBQYHBwgICAkKCQoJCQkICAcGBwUFBAMCAQEBAQIDBAUFBwYHCAgJCQkGCwsKCgoJCAgHBgYEBAMBAQEBAwQEBgYHCAgJCgoKCwsLCwsKCQkJBwcHBQUDAwICAwMFBQcHBwkJCQoLC9/81AMsA/zaCgkJCQkIBwcGBgUEBAIBAQEBAgQEBQUHBwcICQkJCQoDJgoJCQkJCAcHBgYFBAQCAQEBAQIEBAUFBwcHCAkJCQkAAAAAAgAAAAADtQP0AAMACgAANyE1IQEjCQEjESFKA2z8lAEG7AGcAZzs/qAMfQIK/mQBnAFhAAYAAAAAA/QD8wADAAcACwAPABIAFgAANyE1ISUhNSE1ITUhNSE1KQERNwMhNSEMA+j8GAG2AjL9zgIy/c4CMv3O/kr6+gPo/BgMXn1efV19Xv4M+gGWXgAFAAAAAAPzA/MAJQBpAKgArADwAAABFT8bIw8GBR8PNSMvDT8CJw8OHw8TByMPDBc/AzsBHwUzHwYzLxcjJREhEQcRHw8hPw8RLw8hDw4CKg8QDw8ODg4NDQwMDAwKCwoKCQgJDw0KCQQDAgLxBAUGBggJC/7WDQ0NDg4PDw8PEA8QEBAQEAoKCQkJCQgIBgQEBAUDAQEDBKsKCQgIBwYGBQUDAwMBAQEBAQEDAwQEBQYHBwgICgoL9g4OHA4ODQ4NDg0NDQwNDKkLDA8HCAkJCAgICA4DEAUFBQMEAu4EBwkKDQ8REwoKCwsMDAwNDQ4ODg4PDy8GAZP81F4BAQMDBAUGBgcHCAkJCQkKAyYKCQkJCQgHBwYGBQQEAgEBAQECBAQFBgYHBwgJCQkJCvzaCgkJCQkIBwcGBgUEAwMBAZz0AgMDBAQFBQYHBwgICQkJCgsLCwsYGhsbDw4PDwoKCQgIBwaUDAsLCgkIBwcGBQQEAwICBAfEBAwMEBAQERQLExQJCQoJCQgJEhERERAPDw4NDQsMBwgFBgYICQkKDAwODw8RERMTExUUFhUWFxYWFxEQEBAPDg4NDQwMCwsKCgkICAgHBgYFBQQEBQQAAAAAAwAAAAAD8wPrAB8AMwAAEw8HHww/BBUhNSEBNwkBPwcvCDYKCAcGBQMCAQECAwUGBwgKrwgJCgoKCgkINQKQ/Xv+20EBPAGOCgkHBgUDAgEBAgMFBgcJCtMBoQsMDQ0NDg4ODg0ODQ0NDAuvBgUDAQECBAY0I14BJEH+xAGRCwwMDQ0ODg4ODg4NDQwMC9QABgAAAAAD9AP0AAMADwATAB0AIQAnAAAlITUhIzMVIxUzFSMVMzUjNyE1ISMzBxUzNSM3NSM3ITUhJzMVMzUjAQYC7v0S+n0/P328vPoC7v0S+nh4vHh4vPoC7v0S+j4/fWpeID4gPvrbXXw/P3w/u14gvPoAAAAABQAAAAAD9APbAAIABQANABcAGgAAJTcjAyM3ATM3MxczAyMFIQEVITUhATUhJzMnAgJx4x6+Xv76Wi39LF3fTwFlAST+3AGk/tIBJP5mw+l0JXMBGP/+N3h4AjRQ/lo+TQGpPk5zAAABAAAAAAOsA/QACwAAATMDIxUhNSMTMzUhAXGd88gCPJ3zyP3EAx79xNbWAjzWAAAGAAAAAAP0A9QAAwBDAEcAhwCLAMsAACUhNSEHFR8OPw49AS8ODw4TITUhBxUfDTsBPw09AS8ODw4TITUhBxUfDj8OPQEvDg8OAQYC7v0S+gIBAwMEBQUFBgcGCAcICAgICAcHBgYGBQQEAwMCAQECAwMEBAUGBgYHBwgICAgIBwgGBwYFBQUEAwMBAvoC7v0S+gIBAwMEBQUFBgcGCAcICAgICAcHBgYGBQQEAwMCAQECAwMEBAUGBgYHBwgICAgIBwgGBwYFBQUEAwMBAvoC7v0S+gIBAwMEBQUFBgcGCAcICAgICAcHBgYGBQQEAwMCAQECAwMEBAUGBgYHBwgICAgIBwgGBwYFBQUEAwMBAkpeLwgIBwcHBwYFBQUDBAICAQEBAQICBAMFBQUGBwcHBwgICAgIBwcGBgYFBAQDAwIBAQEBAgMDBAQFBgYGBwcICAFgXS4ICAgHBwYGBgUEBAMDAgEBAgMDBAQFBgYGBwcICAgICAcHBwcGBQUFAwQCAgEBAQECAgQDBQUFBgcHBwcIAUBdLggICAcHBgYGBQQEAwMCAQEBAQIDAwQEBQYGBgcHCAgICAgHBwcHBgUFBQMEAgIBAQEBAgIEAwUFBQYHBwcHCAAAAwAAAAADmQP0AAcAKACNAAABFSE1MxEhESUHFQ8GLwc/Bx8GJysBDw0VERUfDTMhMz8BNRE1Lw0rAS8OKwEPDQEdAcZb/YQBbAEDBAYHBwkJCQkHBwYEAwEBAwQGBwcJCQkJBwcGBAOsvwkJCQgICAcGBgYEBAMCAgICAwQEBgYGBwgICAkJCQJ8CQkJCAgIBwYGBgQEAwICAgIDBAQGBgYHCAgICQkJvwMFBQYGBwgICQkJCgoKCwsLCwoKCgkJCQgIBwYGBQUDPoiI/SkC1y4FBQgIBwUEAwEBAwQFBwgICgkICAcFBQIBAQIFBQcICCQCAgMEBAYGBgcICAgJCQn9KQkJCQgICAcGBgUFBAMCAgICAwQFBQYGBwgICAkJCQLXCQkJCAgIBwYGBgQEAwICCgkJCAgIBwYGBQQEAwICAgIDBAQFBgYHCAgICQkAAQAAAAAD9ALoAGAAAAExLw8PHxc/Gh8PByERA0QREhMTFBQUFRYWFhcXFxgYFRUVFBUUExQTEhMSEREREBAPDg8NDQ0MCwsKCQkIBwd1BQYGBgcQEhMWFwwMDQ0NDg4ODw8PDxAQEBAQEhESEREQERAQDw8PDg4NDbIBtQIuDw4ODQwLCgkJBwYFBAMCAQEBAwMEBAYGCAgICgoLCwwNDQ4PDw8REBESEhITExQUKA8PDw4OGxoYFhUKCQkICAcHBgUFBAQDAgIBAQEBAgMEBAYGBggICAoJCwu6AdAAAAAOAAAAAAP0A/MAAgAFAAgACwAQABQAFwAbAB4AIQApAC0AMQB1AAABETclFzUXNyMFNyETFQUhEQEhJRMlMycFMSEnBzcnBxcRBRMDBSUDEy0BEQMlIwUDEQcRHw8hPw8RLw8hDw4CGcj+ZaG3MJb+wM7+4jQBCv6EAy7+ggEKdP1S3JkBCwEjWemWlvrIATJ0dP7n/up3dwEWAZhy/vQ0/vZyXgEBAwQEBgYICAgJCgoLCwsDCgsLCwoKCQgICAYGBAQDAQEBAQMEBAYGCAgICQoKCwsL/PYLCwsKCgkICAgGBgQEAwEBxv7fWSQ730Bky8v+9QNxAYH+f28BHx2ZmcukmTgJywEeP/7n/ud3dwEZARl3Bv5xAR1ycv7yAYAR/PYLCwsKCgkICAcHBQUEAwEBAQEDBAUFBwcICAkKCgsLCwMKCwsLCgoJCAgHBwUFBAMBAQEBAwQEBgYIBwkJCgoLCwAAAAAFAAAAAAP0A/MAAwAHAAsADwATAAA3ITUhJSE1ISUhNSElITUhJSE1IQwD6PwYAVgCkP1w/qgD6PwYAVgCkP1w/qgD6PwYDF6AW5xefV19XgAAAAAKAAAAAAP0A/MAAwAHAAsADwATABcAGwAfACMARwAAARUjNSMVIzUjFSM1ARUjNSMVIzUjFSM1JRUjNSMVIzUjFSM1JxEfByE/BxEvByEPBgOW+j7bP9oDLPo+2z/aAyz6Pts/2l4BAwUGAwgJCgOJCgkJBwYDBAIBAwUGAwgJCvx3CgkJBwYFAwElvb27u7u7ARrb29vb29v6vLy8vLy8hvyCCwoJBwQGBAIBAwUHBwUJCgOECwoJBwQGBAIBAwUGCAkKAAAAAAUAAAAAA/QD8wADAAcACwAPABMAADchNSE1ITUhNSE1ITUhNSE1ITUhDAPo/BgCkP1wA+j8GAKQ/XAD6PwYDF6BV59efVqAXgAAAAADAAAAAAP0A00AAwAHAAsAADchNSE1ITUhNSE1IQwD6PwYA+j8GAPo/Bizb6Zwpm8AAAAABQAAAAAD9AP0AD8AXwCfAKQBIgAAJQ8PLw8/Dx8OExUPBSsBLwU9AT8FOwEfBQMPDy8PPw8fEAE1IwUVHw8zPwMXBy8FDw8fDz8PNS8DNwEzNQE/BS8PDw4BOAEBAwMEBQYGBwgICQkKCgoKCgoJCQgIBwYGBQQDAwEBAQEDAwQFBgYHCAgJCQoKCgoKCgkJCAgHBgYFBAMDAeICAgMDBQUFBQUFAwMCAgICAwMFBQUFBQUDAwIC4QEBAwMEBQYGBwgICQkKCgoKCgoJCQgIBwYGBQQDAwEBAQEDAwQFBgYHCAgJCQoKCgoKCgkJCAgHBgYFBAMDAftkAV6W/K4BAwUHCAoMDQ4PERETExQUCwsVFBN2dgkKCgoVFhQUExMREQ8ODQwKCAcFAwEBAwQFBwgKDA0ODxERExMUFBUUExMRERAPDg0NDAsLCgkJCAcGBgQEAwMCAQEBAQECAwMEBAYGBwgICQkKCgoKCgkJCAgIBwYGBQUEAwMBAQEBAwMEBQYGBwgICAkJsv2EAnwBV5b9lgUEAwIDAQEDBQcICgwNDg8RERMTFASAAAAAA+gLCgoJCQgIBwYGBQQDAwEBAQEDAwQFBgYHCAgJCQoKCgoKCgkJCAgHBgYFBAMDAQEBAQMDBAUGBgcICAkJCgqgZAFeMpYKChQTExERDw4NDAoIBwUDAQEEBgd2dgUEAwIDAQEDBQcICgwNDg8RERMTFBQUFBMTEREPDg0MCggHBQMBAQMFBwgKDA0ODxERExMUFAsLFRQTdv6iMgJqCQoKChUWFBQTExERDw4NDAoIBwUDAQEDBQcICgwNDg8RERMTFAADAAAAAANXA7UAIgBFAJMAAAEzHw4PDisBNRMzHw4PDisBNQMhPxEvDz8PLxghAkgKCgkJCAgHBwYGBAQEAgEBAQEDAwQFBgYHBwgJCAkKCeDACgoJCQgIBwcGBgQEBAIBAQEBAgQEBAYGBwcICAkJCgrAwAHDDQwMDBcWFRMSEQ8NDAoHBgQBAQIDBAYHBwkKCgsNDA4ODwsLCgoKCAgIBgYFBQMDAQEBAQECAwQEBAUGDA8QEhQVFgwMDA0NDQ0N/nABogICAwQEBgYGBwgCCAkJCgkKCQgJBwgGBgUFBAMCArsBdwICAwQEBgYGCAcICQkKCQoKCQkIBwgGBgYEBAMCArv9MQEBAQIGCAoMDg8REhQUFhcYGBERERAQEA4ODgwMDAoJCQcICQkKCgoLDAsMDAwMDQwNDQwNDQwMCwwLCxQUERAODQoFAwQDAgEBAQAABQAAAAAD9APzAAMABwALAA8AEwAANyE1ITUhNSE1ITUhNSE1ITUhNSEMA+j8GAPo/BgD6PwYA+j8GAPo/BgMXn1enF59XX1eAAAAAAEAAAAAA9QD1ADUAAATHx8/DxcRIRcPDy8fPx8fDzMvHw8eKwECAwQFBggICQoMDA0ODhAQERISExQUFRUWFhcXGBgYGBgXFxcWFhUVFBQTEhIREIr+ZrsMDA0ODg4PEBAQEBESERISEhIREhEQEQ8QDw8ODg0NDAwLCgoJCQgHBgYEBAQCAQEBAQIEBAQGBgcICQkKCgsMDA0NDg4PDxAPERAREhESEhwcGxoaGBgWFRQSEQ8OCwp7BQYHCAgJCQoLCwwNDQ4ODg8QEBERERISEhMTFBMUFRQYGBgXFxYWFRUUFBMSEhEQEA4ODQwMCgkICAYFBAMCAgAYGBcXFxYWFRUUFBMSEhEQEA4ODQ0LCgoICAYFBAMCAQECAwQFBggICgoLDQ0ODhCKAZq7DAsLCgkJCAcHBQUEAwMBAQEBAgQEBAYGBwgICgkLCwwMDQ0ODg8PDxAREBESERISEhISERERERAPDw8ODg0NDAwLCwkKCAgHBgYEBAQCAQECAwUICQsNDxASExUWFxgaExITERIRERAQEBAPDw4NDAwLCwkJCAcHBgYEBAMCAQEBAgMEBQYICAoKCw0NDg4QEBESEhMUFBUVFhYXFxcYAAAAAgAAAAAD8gP0AGcA7gAAARUPGC8YPQE/FzsBHxcFHx8/DxcVATcBIyc/Dj0BLx0rAQ8dAoABAgIDAwQFBQUNDxATExYLCwwMDAwNDQ0NDQ0NDQwNDAsMCxUUEhAPDQUFBQQDAwMBAQEBAwMDBAUFBQ0PEBIUFQsMCwwNDA0NDQ0NDQ0NDQwMDAwLCxVUEhEODQYFBQQDAwICAf2NAQEDAwQFBgYICAgJCwsLDAwODg4PDw8QEBARERISEhMTExEREBEQEBAQDw8ODg4ODA0OAR1W/uMuDgoKCQkIBwYGBgQEAwMCAQICAwQFBgcHCAkKCgsMDA0NDg8PDxAREREREhMSExMTExMSEhIRERAQEA8ODg4MDQsLCwkJCAgGBgUEAwMBAoIODQ0MDQwMDAsLFRQSEQ4NBgUEBAQDAgEBAQEBAQIDBAQEBQYNDhESFBULCwwMDA0MDQ0ODQ0NDQwMDAwLCxUUEhEODQYFBQQDAwICAQECAgMDBAUFBg0OERIUFQsLDAwMDA0NDQ0UEhMSEhIRERAQEA8ODg4NDAsLCwkJCAgGBgUEBAIBAQEBAgIEBAUFBgcHCAgJCgoSLf7jVgEfDg0NDQ4ODg8PDxAQEBERERITExISEhIRERAQEA8ODg4NDAwLCgoICQcHBQUEBAICAgIEBAUFBwcJCAoKCwwMDQ4ODg8QEBARERISEhITAAAAAgAAAAADtQP0AAMACgAANyE1IRMzESERMwFKA2z8lA/zAWjz/lkMfQHN/p0BYwGeAAAAAAUAAAAAA/QD9AA/AH8AvwD/Aa8AAAEPDisBLw4/Dx8OBQ8OKwEvDj8PHw4lFQ8OLw49AT8OHw4FFQ8OLw49AT8OHw4BHx8zPw09AS8MPQE/DjsBPx01Lx8PHgOFAQECAgQEBQUGBgcHCAgJCAkJCAcIBgcGBQUEAwMCAQEBAQIDAwQFBQYGBwgHCAkJCAkIBwgHBgYFBQQEAgIB/Z4BAQIDAwQFBQYGBwgHCAkJCAkIBwgHBgYFBQQDAwIBAQEBAgMDBAUFBgYHCAcICQgJCQgHCAcGBgUFBAMDAgEBvQECAwQEBAYGBgcHCAgICQkICAgHBwcFBgQFAwMCAQECAwMFBAYFBwcHCAkKCQhI7bgBAgMEBgcHCQsLDA0ODw8RERITFBQVFhYXFxcZGBkZGgkICAgHBwYGBgQEBAMCAQECAwMEBAoEBAMDAgECAgIEBAUFBgYHBwgICAlkDg8NDg0ODA0MDAwLCwsKCQoICQcIBgYGBQQEAwMCAQECAwQGBwcJCwsMDQ4PDxEREhMUFBUWFhcXFxkYGRkaGhkZGBkXFxcWFhUUFBMSEREPDw4NDAsLCQcHBgQDAgJTCAkICAcHBgYFBQQEAgICAgICBAQFBQYGBwcICAkICQgJBwgGBwYFBQQDAwIBAQEBAgMDBAUFBgcGCAcJCAkICQgIBwcGBgUFBAQCAgICAgIEBAUFBgYHBwgICQgJCAkHCAYHBgUFBAMDAgEBAQECAwMEBQUGBwYIBwkI1gkJCAcIBgcGBQUEAwMCAQEBAQIDAwQFBQYHBggHCAkJCAkICAcHBgYFBQQEAgIBAQEBAgIEBAUFBgYHBwgICQgJCQgHCAYHBgUFBAMDAgEBAQECAwMEBQUGBwYIBwgJCQgJCAgHBwYGBQUEBAICAQEBAQICBAQFBQYGBwcICAn+xhoZGRgZFxcXFhYVFBQTEhERDw8ODQwLCwkHBwYEAwIBAgICBAQFBQYGBwcICAkICAgIBwcGBgsGBwYIBwgICQkIBwgGBwYFBQQDAwIBAQECAgMEBQUFBgcHCAgJCQoKCwoMCwwNDA0NDg0ODg4XFxYWFRUVFBQTExIRERAPDw4NDQsLCgkIBwYFBAMBAQECAwQGBwcJCwsMDQ4PDxEREhMUFBUWFhcXFxkYGRkAAgAAAAAD9AO1AAgAVAAAARchFSEHFzcnJREVHw4hPw49ASMVIREhFTM9AS8OIQ8OAtV1/k0BsHI/4OD8+AICAwQFBQYHBwcICQkJCQHPCQkJCQgHBwcGBQUEAwICXP4xAc9cAgIDBAUFBgcHBwgJCQkJ/jEJCQkJCAcHBwYFBQQDAgICoHRYdD7e3oD9RAkJCAgIBwcGBgUEBAMCAQEBAQIDBAQFBgYHBwgICAkJzMwCvMzMCQkICAgHBwYGBQQEAwIBAQEBAgMEBAUGBgcHCAgICQADAAAAAAOvA/QAAwBHAF0AAAERIREHERUfDTMhMz8OES8OIyEjDw0nETMRITUhIw8NA1X+DFsCAgMEBQUGBgcICAgJCQkB9AkJCQgICAcGBgUFBAMCAQEBAQIDBAUFBgYHCAgICQkJ/gwJCQkICAgHBgYFBQQDAgK2WQIT/e0JCQkIBwgHBgYFBAQDAgEC4/2EAnwF/YgJCQgJCAcHBgYGBAQDAgICAgMEBAYGBgcHCAkICQkCeAkJCQgICAcGBgUFAwMDAQEDAwMFBQYGBwgICAkJsv2EAnxbAgIDBAUFBgYHCAgICQkAAAASAN4AAQAAAAAAAAABAAAAAQAAAAAAAQAQAAEAAQAAAAAAAgAHABEAAQAAAAAAAwAQABgAAQAAAAAABAAQACgAAQAAAAAABQALADgAAQAAAAAABgAQAEMAAQAAAAAACgAsAFMAAQAAAAAACwASAH8AAwABBAkAAAACAJEAAwABBAkAAQAgAJMAAwABBAkAAgAOALMAAwABBAkAAwAgAMEAAwABBAkABAAgAOEAAwABBAkABQAWAQEAAwABBAkABgAgARcAAwABBAkACgBYATcAAwABBAkACwAkAY8gdG9vbGJhci1tYXRlcmlhbFJlZ3VsYXJ0b29sYmFyLW1hdGVyaWFsdG9vbGJhci1tYXRlcmlhbFZlcnNpb24gMS4wdG9vbGJhci1tYXRlcmlhbEZvbnQgZ2VuZXJhdGVkIHVzaW5nIFN5bmNmdXNpb24gTWV0cm8gU3R1ZGlvd3d3LnN5bmNmdXNpb24uY29tACAAdABvAG8AbABiAGEAcgAtAG0AYQB0AGUAcgBpAGEAbABSAGUAZwB1AGwAYQByAHQAbwBvAGwAYgBhAHIALQBtAGEAdABlAHIAaQBhAGwAdABvAG8AbABiAGEAcgAtAG0AYQB0AGUAcgBpAGEAbABWAGUAcgBzAGkAbwBuACAAMQAuADAAdABvAG8AbABiAGEAcgAtAG0AYQB0AGUAcgBpAGEAbABGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIAB1AHMAaQBuAGcAIABTAHkAbgBjAGYAdQBzAGkAbwBuACAATQBlAHQAcgBvACAAUwB0AHUAZABpAG8AdwB3AHcALgBzAHkAbgBjAGYAdQBzAGkAbwBuAC4AYwBvAG0AAAAAAgAAAAAAAAAKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAjAQIBAwEEAQUBBgEHAQgBCQEKAQsBDAENAQ4BDwEQAREBEgETARQBFQEWARcBGAEZARoBGwEcAR0BHgEfASABIQEiASMBJAAQVGV4dF9PdXRkZW50XzAwMQtQaWN0dXJlXzAwMQxTZXR0aW5nc18wMDEQQ29sb3JfcGlja2VyXzAwMhBBbGlnbl9DZW50ZXJfMDA2CExpbmVfMDAxDVVuZGVybGluZV8wMDEMU29ydF9aLUFfMDAxCFVuZG9fMDAxEENoYXJ0X2J1YmJsZV8wMDELRG93bmxvYWRfMDAPVGV4dF9pbmRlbnRfMDAxEkNoYXJ0X0RvdWdobnV0XzAwMQlDbGVhcl8wMDINTnVtYmVyaW5nXzAwMQxTb3J0X0EtWl8wMDEKSXRhbGljXzAwMQtCdWxsZXRzXzAwMQlQYXN0ZV8wMDEIUmVkb18wMDEPQ2hhcnRfcmFkYXJfMDAxD0FsaWduX1JpZ2h0XzAwMQlUYWJsZV8wMDEOQWxpZ25fTGVmdF8wMDEITWVudV8wMDEHQ3V0XzAwMghCb2xkXzAwMRFBbGlnbl9KdXN0aWZ5XzAwMQpSZWxvYWRfMDAxClNlYXJjaF8wMDEKVXBsb2FkXzAwMQpEZXNpZ25fMDA1CkV4cG9ydF8wMDEIQ29weV8wMDIAAA==) format('truetype');
        font-weight: normal;
        font-style: normal;
    }

    .e-tbar-btn .tb-icons {
        font-family: 'Material_toolbar';
        speak: none;
        font-size: 16px;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        color: white;
        font-size: 16px !important;
    }

    .e-toolbar .e-icons {
        font-size: 20px;
    }

    .e-tbar-menu-icon:before {
        content: "\e718";
    }

    .e-tbar-search-icon:before {
        content: "\e71d";
    }

    .e-tbar-settings-icon:before {
        content: "\e702";
    }

    .maincontent {
        height: 400px;
        background-color: rgb(244, 246, 249);
    }

    .e-toolbar .e-toolbar-items, .footer, .e-toolbar .e-toolbar-item .e-tbar-btn.e-btn {
        background-color: midnightblue;
        color: white;
        font-size: 16px;
    }
</style>

Combining Persistence and Explicit Target

Use both properties together for advanced scenarios with explicit targeting:

<SfSidebar 
    ID="unique-sidebar-id"
    Width="300px"
    EnablePersistence="true"
    Target=".sidebar-container"
    @bind-IsOpen="SidebarToggle">
    <ChildContent>
        <div style="padding: 20px;">Sidebar Content</div>
    </ChildContent>
</SfSidebar>

<div class="sidebar-container">                    <!-- Explicit target -->
  <div>                                         <!-- REQUIRED: Inner wrapper -->
    <div>Sidebar scoped to this container only</div>
  </div>
</div>

This configuration:

• Retains sidebar state in localStorage
• Applies sidebar only within the .sidebar-container element
• Requires unique ID for persistence tracking
• Inner wrapper `<div>` is mandatory for CSS transforms to work

Implicit vs Explicit Target Comparison

Recommendation: Use implicit targeting (no Target property) for most cases. Only use explicit targeting when you have a specific layout requirement or need to scope the sidebar to a particular container.

Styling and Customization

This guide covers CSS customization of the Sidebar component's appearance, states, and behavior.

Table of Contents

• Sidebar Root Customization
• Position-Based Styling
• State-Based Styling
• Type-Based Styling
• Dock State Styling
• Backdrop Customization
• RTL Support
• Transition Effects

Sidebar Root Customization

Customize the sidebar root element background and styling:

/* Basic sidebar styling */
.e-sidebar {
    background: #898b2b;
    color: #333;
}

/* Add padding or borders */
.e-sidebar {
    border-right: 2px solid #ddd;
}

Position-Based Styling

Customize left and right positioned sidebars differently:

Left Position Styling

.e-sidebar.e-left {
    border-right: 2px solid red;
    background-color: #f5f5f5;
}

Right Position Styling

.e-sidebar.e-right {
    border-left: 2px solid red;
    background-color: #f5f5f5;
}

State-Based Styling

Customize sidebar appearance based on open/closed state:

Open State (Left)

.e-sidebar.e-left.e-open {
    transition: transform 2.5s ease;
    background-color: #ffffff;
    box-shadow: 2px 0 5px rgba(0,0,0,0.1);
}

Open State (Right)

.e-sidebar.e-right.e-open {
    transition: transform 2.5s ease;
    background-color: #ffffff;
    box-shadow: -2px 0 5px rgba(0,0,0,0.1);
}

Closed State (Left)

.e-sidebar.e-left.e-transition.e-close {
    transition: transform 2.5s ease, visibility 1200ms;
}

Closed State (Right)

.e-sidebar.e-right.e-transition.e-close {
    transition: transform 2.5s ease, visibility 1200ms;
}

Type-Based Styling

Customize sidebars based on their Type property:

Auto Type

.e-sidebar.e-left.e-auto {
    background-color: pink;
}

Push Type

.e-sidebar.e-left.e-push {
    background-color: beige;
}

Over Type

.e-sidebar.e-left.e-over {
    background-color: aqua;
}

Slide Type

.e-sidebar.e-left.e-slide {
    background-color: green;
}

Dock State Styling

When dock support is enabled, the e-dock class is added. Customize docked sidebars:

/* Dock state styling */
.e-sidebar.e-dock {
    background: #2d323e;
    width: 72px;
}

/* Customize dock with left position */
.e-sidebar.e-left.e-dock {
    border-right: 1px solid #ccc;
}

/* Customize dock with right position */
.e-sidebar.e-right.e-dock {
    border-left: 1px solid #ccc;
}

/* Hide text when docked */
.e-sidebar.e-dock.e-close span.e-text {
    display: none;
}

/* Show text when expanded */
.e-sidebar.e-dock.e-open span.e-text {
    display: inline-block;
}

Dock with Icons Example

.sidebar-item {
    text-align: center;
    padding: 10px;
}

.e-sidebar .e-icons {
    color: #c0c2c5;
    font-size: 24px;
}

.e-open .e-icons {
    margin-right: 16px;
}

.e-open .e-text {
    font-size: 15px;
    overflow: hidden;
}

.e-sidebar.e-dock.e-close .sidebar-item {
    text-align: center;
}

.e-sidebar.e-dock.e-open .sidebar-item {
    text-align: left;
    padding-left: 15px;
}

Backdrop Customization

Customize the overlay backdrop that appears behind the sidebar:

/* Default backdrop styling */
.e-sidebar-overlay {
    background-color: rgba(0, 0, 0, 0.5);
}

/* Custom backdrop colors */
.e-sidebar-overlay {
    background-color: aqua;
}

/* Transparent backdrop */
.e-sidebar-overlay {
    background-color: rgba(0, 0, 0, 0.2);
}

/* Dark overlay */
.e-sidebar-overlay {
    background-color: rgba(0, 0, 0, 0.8);
}

Animation & RTL Support

Enabling Animations

Control sidebar animation transitions using the Animate property. By default, Animate is set to true to enable smooth transition animations when expanding or collapsing the sidebar.

C# Component Properties:

<!-- Enable animations (default) -->
<SfSidebar @ref="sidebarObj" Animate="true" Width="250px" @bind-IsOpen="SidebarToggle">
    <!-- Smooth expanding/collapsing transition -->
</SfSidebar>

<!-- Disable animations for instant expand/collapse -->
<SfSidebar @ref="sidebarObj" Animate="false" Width="250px" @bind-IsOpen="SidebarToggle">
    <!-- No transition animation -->
</SfSidebar>

Right-to-Left (RTL) Support

The EnableRtl property displays the sidebar in right-to-left direction for RTL languages (Arabic, Hebrew, Urdu, etc.). When RTL support is enabled, the e-rtl class is added automatically.

C# Component Properties:

<!-- RTL enabled for right-to-left languages -->
<SfSidebar @ref="sidebarObj" EnableRtl="true" Width="250px" @bind-IsOpen="SidebarToggle">
    <!-- Sidebar content automatically mirrored -->
</SfSidebar>

CSS Styling for RTL:

/* RTL sidebar styling - left-to-right mirror */
.e-sidebar.e-left.e-rtl {
    background-color: antiquewhite;
    border-left: 2px solid red;
    border-right: none;
}

.e-sidebar.e-right.e-rtl {
    background-color: antiquewhite;
    border-right: 2px solid red;
    border-left: none;
}

Complete Animation & RTL Example

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

<div id="header" style="height:45px;text-align: center;color:white;background-color:midnightblue;font-size:1.2rem;line-height:45px;">
    Header
</div>

<!-- Sidebar with animations disabled and RTL enabled -->
<SfSidebar @ref="sidebarObj" Animate="false" EnableRtl="true" Width="250px" @bind-IsOpen="SidebarToggle">
    <ChildContent>
        <div style="text-align: center;" class="text-content">
            <span>Sidebar</span>
            <span>
                <SfButton @onclick="Close" CssClass="e-btn close-btn">Close Sidebar</SfButton>
            </span>
        </div>
    </ChildContent>
</SfSidebar>

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

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

<style>
    .e-sidebar {
        background-color: #f8f8f8;
        color: black;
    }

    .text-content {
        font-size: 1.5rem;
        padding: 3rem;
    }
</style>

Transition Effects

Control sidebar animation and transition behavior. Animation can be enabled/disabled using the component's Animate property:

Disabling Animations with Animate Property:

<!-- Disable animations for instant expand/collapse (Animate="false") -->
<SfSidebar Animate="false" Width="250px" @bind-IsOpen="SidebarToggle">
    <!-- No smooth transition -->
</SfSidebar>

CSS Transition Customization:

/* Smooth transition (default with Animate="true") */
.e-sidebar {
    transition: transform 0.3s ease-in-out;
}

/* Fast transition */
.e-sidebar {
    transition: transform 0.1s linear;
}

/* Custom easing */
.e-sidebar {
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Multiple properties */
.e-sidebar {
    transition: transform 0.3s ease, width 0.3s ease, opacity 0.3s ease;
}

/* No animation (similar to Animate="false") */
.e-sidebar {
    transition: none;
}

/* Custom animation for state transitions */
.e-sidebar.e-transition {
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

Complete Styling Example

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

<div id="header" style="height:55px;text-align: center;color:white;background-color:midnightblue;padding-top:5px;">
    <SfButton @onclick="Toggle" CssClass="e-btn header-btn">☰ Menu</SfButton>
</div>

<SfSidebar @ref="sidebarObj" Width="250px" @bind-IsOpen="SidebarToggle">
    <ChildContent>
        <nav class="sidebar-menu">
            <ul>
                <li>Home</li>
                <li>About</li>
                <li>Services</li>
                <li>Contact</li>
            </ul>
        </nav>
    </ChildContent>
</SfSidebar>

<div class="main-content">
    <p>Main content area with custom styling</p>
</div>

@code {
    SfSidebar sidebarObj;
    public bool SidebarToggle = false;

    public void Toggle()
    {
        SidebarToggle = !SidebarToggle;
    }
}

<style>
    /* Sidebar base styling */
    .e-sidebar {
        background: linear-gradient(to bottom, #2c3e50, #34495e);
        color: #ecf0f1;
        transition: transform 0.3s ease;
    }

    /* Left position styling */
    .e-sidebar.e-left {
        border-right: 1px solid #1a252f;
    }

    /* Open state styling */
    .e-sidebar.e-left.e-open {
        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.3);
    }

    /* Menu styling */
    .sidebar-menu ul {
        list-style: none;
        padding: 20px 0;
        margin: 0;
    }

    .sidebar-menu li {
        padding: 15px 20px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        cursor: pointer;
        transition: background-color 0.2s ease;
    }

    .sidebar-menu li:hover {
        background-color: rgba(255, 255, 255, 0.1);
    }

    /* Backdrop styling */
    .e-sidebar-overlay {
        background-color: rgba(0, 0, 0, 0.5);
    }

    /* Main content styling */
    .main-content {
        padding: 30px;
        background-color: #f5f5f5;
        min-height: calc(100vh - 55px);
    }

    /* Button styling */
    .header-btn {
        background-color: #1a252f;
        color: white;
        border: none;
    }
</style>

Styling Tips:

• Always test transitions on different browsers for compatibility
• Use e-dock class when enabling dock mode for consistent styling
• Combine state classes (.e-open, .e-close, .e-left, .e-right) for precise control
• Use e-rtl for right-to-left language support
• Keep backdrop opacity between 0.2 and 0.8 for usability
• Use CSS transitions for smooth animations instead of JavaScript

Getting Started with Blazor Sidebar in Blazor Web App (.NET 8)

This guide covers installation and setup of the Syncfusion Blazor Sidebar component in a Blazor Web App with .NET 8.

Table of Contents

• Project Creation
• Install NuGet Packages
• Add Import Namespaces
• Register Syncfusion Service
• Add Stylesheet and Script Resources
• Add Sidebar Component
• Render Mode Configuration

Project Creation

Create in Visual Studio

Create a Blazor Web App using Visual Studio via Microsoft Templates or the Syncfusion® Blazor Extension. For detailed instructions, refer to Blazor Web App Getting Started documentation.

Create in Visual Studio Code

Create a Blazor Web App using Visual Studio Code. For example, with the Auto interactive render mode:

dotnet new blazor -o BlazorWebApp -int Auto
cd BlazorWebApp
cd BlazorWebApp.Client

Create via .NET CLI

dotnet new blazor -o BlazorWebApp -int Auto
cd BlazorWebApp
cd BlazorWebApp.Client

Note: Configure the appropriate Interactive render mode (Auto, Server, or WebAssembly) and Interactivity location when creating the Blazor Web App.

Install NuGet Packages

Install Syncfusion.Blazor.Navigations and Syncfusion.Blazor.Themes NuGet packages in your project.

Package Manager Console:

Install-Package Syncfusion.Blazor.Navigations -Version {{ site.releaseversion }}
Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}

.NET CLI:

dotnet add package Syncfusion.Blazor.Navigations -Version {{ site.releaseversion }}
dotnet add package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}

Important: If using WebAssembly or Auto render modes in the Blazor Web App, install these packages in the client project.

All Syncfusion Blazor packages are available on nuget.org. See the NuGet packages documentation for details.

Add Import Namespaces

After packages are installed, open ~/_Imports.razor in the client project and add:

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

Register Syncfusion Service

Register the Syncfusion Blazor service in the Program.cs file:

using Syncfusion.Blazor;

....
builder.Services.AddSyncfusionBlazor();
....

Important: If the Interactive Render Mode is set to WebAssembly or Auto, register the Syncfusion® Blazor service in Program.cs files of both the server and client projects in your Blazor Web App.

Add Stylesheet and Script Resources

The theme stylesheet and script can be accessed from NuGet through Static Web Assets. Include stylesheet and script references in the ~/Components/App.razor file:

<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
....
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>

Check out the Blazor Themes documentation to discover various methods (Static Web Assets, CDN, and CRG) for referencing themes in your Blazor application. Also, check the Adding Script Reference documentation to learn different approaches for adding script references in your Blazor application.

Add Sidebar Component

Add the Syncfusion Blazor Sidebar component in ~/Components/Pages/*.razor file. If the interactivity location is set to Per page/component in the Web App, define a render mode at the top of the page (for example, InteractiveServer, InteractiveWebAssembly or InteractiveAuto).

Note: If the Interactivity Location is set to Global with Auto or WebAssembly, the render mode is automatically configured in the App.razor file by default.

Add render mode directive if needed:

@rendermode InteractiveAuto

Add the Sidebar component:

@using Syncfusion.Blazor.Navigations

<div id="header" style="height:45px;text-align: center;color:white;background-color:midnightblue;font-size:1.2rem;line-height:45px;">
    Header
</div>

<SfSidebar Width="250px">
    <ChildContent>
        <div style="text-align: center;" class="text-content">Sidebar</div>
    </ChildContent>
</SfSidebar>

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

<style>
    .e-sidebar {
        background-color: #f8f8f8;
        color: black;
    }

    .text-content {
        font-size: 1.5rem;
        padding: 3rem;
    }
</style>

Render Mode Configuration

Auto Render Mode

The Auto mode provides interactivity using the most appropriate technology based on browser capabilities:

dotnet new blazor -o BlazorWebApp -int Auto

Server Render Mode

For server-side rendering with interactivity:

dotnet new blazor -o BlazorWebApp -int Server

WebAssembly Render Mode

For client-side WebAssembly execution:

dotnet new blazor -o BlazorWebApp -int WebAssembly

Choose the render mode that best fits your application's requirements and deployment strategy.