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](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](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](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](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](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](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](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](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](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

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](references/getting-started.md) to install and configure
2. Choose your [Sidebar Type](references/sidebar-types.md) based on your layout needs
3. Learn [State Management](references/managing-state.md) to control open/close behavior
4. Explore [Advanced Features](references/advanced-features.md) for docking and responsiveness
5. Reference [Complete API](references/api-reference.md) 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.