Implementing Syncfusion ASP.NET Core Sidebar

When to Use This Skill

• Create responsive navigation menus that collapse on mobile and expand on desktop
• Implement collapsible sidebars with smooth animations and transitions
• Build docked sidebar panels that reserve persistent space with icon-only views
• Handle sidebar state management with open/close methods and event callbacks
• Customize sidebar behavior with media queries, gestures, and backdrop overlays
• Integrate with ASP.NET Core applications using TagHelper syntax and server-side binding

Documentation and Navigation Guide

Getting Started

• Installation and NuGet package setup
• ASP.NET Core project creation with Razor pages
• TagHelper registration in _ViewImports.cshtml
• Adding CSS/script resources via CDN or local
• First working sidebar implementation
• Script manager registration

Understanding Sidebar Types

• Sidebar type enumeration (Over, Push, Slide, Auto)
• Over type: floating sidebar above content
• Push type: sidebar pushes main content aside
• Slide type: sidebar slides without resizing content
• Auto type: responsive type selection by screen resolution
• Changing types at runtime with dataBind()
• Type selection best practices

Managing Sidebar State

• isOpen property for initial state
• show() method to open the sidebar programmatically
• hide() method to close the sidebar
• toggle() method for open/close switching
• Controlling sidebar from button clicks
• State initialization and persistence
• Toggle patterns with UI buttons

Positioning and Sizing

• position property (Left or Right placement)
• width property for custom sidebar dimensions
• target property for custom context targeting
• Placing sidebar inside specific containers
• Responsive sizing strategies
• Width in pixels vs auto-sizing
• Multiple sidebars in different positions

Advanced Features

• enableDock property for docked state mode
• dockSize configuration for reserved space
• closeOnDocumentClick for dismiss-on-click behavior
• showBackdrop overlay when sidebar is open
• enableGestures for touch swipe control
• mediaQuery for responsive breakpoint control
• enablePersistence for state preservation across page reloads

Events and Callbacks

• change event: fires on expand/collapse state changes
• open event: fires when sidebar opens
• close event: fires when sidebar closes
• created event: fires on component initialization
• destroyed event: fires on component destruction
• ChangeEventArgs structure with event details
• EventArgs properties for event handling
• Binding events with TagHelper syntax

Internationalization and RTL

• enableRtl property for right-to-left layouts
• RTL sidebar positioning (right-aligned by default)
• Mirror positioning and alignment
• RTL animation and positioning behavior
• Multi-language sidebar content
• Combining RTL with positioning properties

Styling and Appearance

• animate property to enable/disable transitions
• zIndex property for layering control with overlays
• CSS class customization and theming
• Backdrop styling and opacity
• Animation duration and easing configuration
• Theme integration
• Custom styling best practices

Complete API Reference

• All 15 properties with types and defaults
• All 11 methods with signatures and descriptions
• All 5 events with their argument types
• Type enumerations (SidebarType, SidebarPosition)
• Event argument structures (ChangeEventArgs, EventArgs)
• Cross-references to feature documentation
• Usage examples for each API

Quick Start Example

<ejs-sidebar id="default-sidebar" type="Push" isOpen="false">
    <e-content-template>
        <div style="padding: 20px;">
            <h3>Sidebar Menu</h3>
            <p>Navigation items go here</p>
        </div>
    </e-content-template>
</ejs-sidebar>

<div style="padding: 20px;">
    <ejs-button id="toggleBtn" content="Toggle Sidebar" onclick="toggleSidebar()"></ejs-button>
    <h2>Main Content</h2>
    <p>Your page content appears here</p>
</div>

<script>
var sidebar;

document.addEventListener('DOMContentLoaded', function () {
    sidebar = document.getElementById('default-sidebar').ej2_instances[0];
});

function toggleSidebar() {
    sidebar.toggle();
}
</script>

Common Patterns

Pattern 1: Mobile-Responsive Navigation

type="Auto"

<ejs-sidebar id="navbar" type="Auto" isOpen="false">
    <!-- Navigation items -->
</ejs-sidebar>

Pattern 2: Docked Sidebar with Icons

<ejs-sidebar id="dockedbar" 
             enableDock="true" 
             dockSize="60px" 
             type="Push">
    <!-- Icon items -->
</ejs-sidebar>

Pattern 3: Backdrop with Overlay

<ejs-sidebar id="overlaybar" 
             type="Over" 
             showBackdrop="true" 
             closeOnDocumentClick="true">
    <!-- Content -->
</ejs-sidebar>

Pattern 4: Right-Positioned Sidebar

<ejs-sidebar id="rightbar" position="Right" type="Push">
    <!-- Right-side navigation -->
</ejs-sidebar>

Pattern 5: Custom Width Sidebar

<ejs-sidebar id="custombar" type="Push" width="320px">
    <!-- Content with 320px width -->
</ejs-sidebar>

Key Properties Overview

type

position

isOpen

width

enableDock

dockSize

animate

enableGestures

mediaQuery

showBackdrop

closeOnDocumentClick

enableRtl

zIndex

target

enablePersistence

Common Use Cases

• Admin Dashboards: Multi-section dashboards with collapsible navigation
• E-Commerce Sites: Filter sidebars that collapse on mobile
• Documentation Sites: Table of contents sidebars
• Application Menus: Docked icon-based navigation that expands on hover
• Mobile Apps: Hamburger menus that slide from the side
• Content Management: Expandable editor sidebars
• Data Tables: Filtering and column selection sidebars

Next Steps

1. Start with Getting Started to install and configure
2. Choose your Sidebar Type based on your layout needs
3. Learn State Management to control open/close behavior
4. Explore Advanced Features for docking and responsiveness
5. Reference Complete API for all properties and methods

Component Overview

• Four expansion types with automatic responsive selection
• Touch gesture support for mobile devices
• State persistence across page reloads
• Event system for open/close/change lifecycle
• Customizable positioning and sizing
• Backdrop overlay for modal-like behavior
• RTL and internationalization support
• Smooth animations and transitions
• Full TagHelper integration with ASP.NET Core