syncfusion-aspnetcore-sidebar

Implementing Syncfusion ASP.NET Core Sidebar

The Sidebar component is an expandable or collapsible navigation container that acts as a side panel to display primary or secondary content alongside the main content area. It provides flexible positioning, multiple expansion types, and responsive behavior ideal for modern web applications.

When to Use This Skill

Use this skill when you need to:

• 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

📄 Read: references/getting-started.md

• 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

📄 Read: references/sidebar-types.md

• 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

📄 Read: references/managing-state.md

• 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

📄 Read: references/positioning-and-sizing.md

• 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

📄 Read: references/advanced-features.md

• 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

📄 Read: references/events-and-callbacks.md

• 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

📄 Read: references/internationalization.md

• 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

📄 Read: references/styling-and-appearance.md

• 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

📄 Read: references/api-reference.md

• 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

Here's a minimal Sidebar implementation with a toggle button:

<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

Use type="Auto" to automatically switch between Over (mobile) and Push (desktop) based on screen resolution:

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

Pattern 2: Docked Sidebar with Icons

Enable docking with reserved space for icon-only view:

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

Pattern 3: Backdrop with Overlay

Show content overlay when sidebar opens:

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

Pattern 4: Right-Positioned Sidebar

Place sidebar on the right side:

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

Pattern 5: Custom Width Sidebar

Set specific width in pixels:

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

Key Properties Overview

Property	Type	Purpose
type	SidebarType	Controls how sidebar expands (Over/Push/Slide/Auto)
position	SidebarPosition	Sidebar placement (Left/Right)
isOpen	boolean	Initial open/closed state
width	string/number	Sidebar width ('auto', '300px', or number)
enableDock	boolean	Enables docked state mode
dockSize	string/number	Width when docked ('auto', '60px', or number)
animate	boolean	Enable/disable expansion animations
enableGestures	boolean	Enable touch swipe to expand/collapse
mediaQuery	string	CSS media query for responsive behavior
showBackdrop	boolean	Show overlay when sidebar is open
closeOnDocumentClick	boolean	Close sidebar when clicking outside
enableRtl	boolean	Right-to-left layout support
zIndex	string/number	Layering for overlay mode (default: 1000)
target	HTMLElement/string	Container for sidebar (custom context)
enablePersistence	boolean	Preserve state across page reloads

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

The Sidebar component is built on the Syncfusion EJ2 framework and provides:

• 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

For detailed implementation examples and advanced scenarios, refer to the reference guides above.