syncfusion-react-sidebar

# Implementing Syncfusion React Sidebar The Syncfusion React Sidebar is a responsive navigation component that enables flexible layout patterns for modern web applications. It supports multiple display modes (Over, Push, Slide, Auto), responsive breakpoints, touch gestures, keyboard navigation, and seamless integration with ListView and TreeView components. ## When to Use This Skill Choose Sidebar when you need: - **Responsive navigation** - Drawer menus that adapt to desktop/mobile viewports - **Multi-mode layouts** - Over (float), Push (shift content), Slide (translate), or Auto (responsive) behaviors - **Content organization** - Nested menus, ListView/TreeView integration, or multi-panel layouts - **User interaction patterns** - Toggle buttons, backdrop overlays, auto-close on item click, or keyboard shortcuts - **Accessibility** - ARIA labels, keyboard navigation (Tab, Enter, Escape), and screen reader support - **Customization** - Themed styling, animation variations, RTL support, or custom context containers ## Navigation Guide ### Getting Started 📄 **Read:** [references/getting-started.md](references/getting-started.md) - Installation and package setup - Basic sidebar rendering - CSS imports and theme configuration - Initial state management - First working example ### API Reference: Properties 📄 **Read:** [references/properties-reference.md](references/properties-reference.md) - All 18 properties with types, defaults, and examples - Display properties (type, position, width, animate, showBackdrop, zIndex) - Behavior properties (closeOnDocumentClick, enableGestures, enableRtl, mediaQuery) - State properties (isOpen, enableDock, dockSize, enablePersistence) - Container property (target) ### API Reference: Methods 📄 **Read:** [references/methods-reference.md](references/methods-reference.md) - `show(e?: Event)` - Display sidebar with optional event parameter - `hide(e?: Event)` - Hide sidebar with optional event parameter - `toggle()` - Toggle open/closed state - `destroy()` - Remove sidebar from DOM - Complete examples for each method ### API Reference: Events 📄 **Read:** [references/events-reference.md](references/events-reference.md) - `change` - State change notification (user or programmatic) - `open` - Before sidebar opens (preventable) - `close` - Before sidebar closes (preventable) - `created` - After sidebar is initialized - `destroyed` - When sidebar is removed - Event handling examples and patterns ### API Reference: Event Arguments 📄 **Read:** [references/event-arguments-reference.md](references/event-arguments-reference.md) - `ChangeEventArgs` interface - element, name, cancel, isInteracted - `EventArgs` interface - cancel, element, event, isInteracted, model - `SidebarModel` object - Complete configuration snapshot - Type definitions and usage examples ### Sidebar Positioning & Behavior 📄 **Read:** [references/sidebar-positioning.md](references/sidebar-positioning.md) - Sidebar types: Over, Push, Slide, Auto - Position: Left or Right - Width and dock size configuration - Multiple sidebars side-by-side - Media query responsive behavior ### Opening & Closing Sidebar 📄 **Read:** [references/opening-closing.md](references/opening-closing.md) - Toggle functionality - Programmatic show/hide methods - Auto-close on document click - Auto-close on escape key - Animation transitions - Event handling for state changes ### Content Integration 📄 **Read:** [references/content-integration.md](references/content-integration.md) - ListView integration with sidebar - TreeView integration for hierarchical navigation - Custom HTML content and structures - Dynamic data binding patterns - Menu-like navigation structures ### Styling & Customization 📄 **Read:** [references/styling-customization.md](references/styling-customization.md) - CSS class customization - Theme styles (default, material, bootstrap) - Animation variations and timing - Responsive breakpoint patterns - RTL (Right-to-Left) support - Custom animations ### Accessibility & Best Practices 📄 **Read:** [references/accessibility.md](references/accessibility.md) - WCAG compliance guidelines - Keyboard navigation (Tab, Enter, Escape) - ARIA attributes for screen readers - Focus management - Backdrop overlay interaction patterns ## Quick Start ```jsx import React, { useState } from 'react'; import { SidebarComponent } from '@syncfusion/ej2-react-navigations'; import { ButtonComponent } from '@syncfusion/ej2-react-buttons'; function App() { const [isOpen, setIsOpen] = useState(false); const handleToggle = () => { setIsOpen(!isOpen); }; return ( <div className="container"> {/* Toggle Button */} <ButtonComponent cssClass="e-primary" onClick={handleToggle} > Toggle Sidebar </ButtonComponent> {/* Sidebar Component */} <SidebarComponent id="sidebar" width="250px" type="Over" isOpen={isOpen} change={() => setIsOpen(!isOpen)} showBackdrop={true} closeOnDocumentClick={true} > <div className="sidebar-content"> <h3>Navigation Menu</h3> <ul> <li><a href="#home">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#services">Services</a></li> <li><a href="#contact">Contact</a></li> </ul> </div> </SidebarComponent> {/* Main Content */} <div className="main-content"> <h1>Main Content Area</h1> <p>Content shifts when type is "Push"</p> </div> </div> ); } export default App; ``` ## Common Patterns ### Pattern 1: Responsive Auto Sidebar Automatically switches between Over (mobile) and Push (desktop) modes based on viewport. ```jsx <SidebarComponent type="Auto" width="250px" isOpen={true} showBackdrop={true} /> ``` ### Pattern 2: Mobile Drawer Menu Floating sidebar that closes on backdrop click or escape key. ```jsx <SidebarComponent type="Over" width="280px" showBackdrop={true} closeOnDocumentClick={true} position="Left" /> ``` ### Pattern 3: Docked Navigation Panel Persistent sidebar with fixed width that shows as icon bar when docked. ```jsx <SidebarComponent enableDock={true} dockSize="50px" width="250px" type="Push" /> ``` ### Pattern 4: RTL Navigation (Arabic/Hebrew) Right-aligned sidebar for right-to-left languages. ```jsx <SidebarComponent position="Right" enableRtl={true} type="Over" /> ``` ## Key Properties Overview | Property | Type | Default | Purpose | |----------|------|---------|---------| | **type** | `SidebarType` | `'Auto'` | Display mode: Over, Push, Slide, Auto | | **isOpen** | `boolean` | `false` | Controls sidebar open/closed state | | **position** | `SidebarPosition` | `'Left'` | Sidebar placement: Left or Right | | **width** | `string \| number` | `'auto'` | Sidebar width (pixels or percentage) | | **target** | `HTMLElement \| string` | `null` | Container to render sidebar inside | | **showBackdrop** | `boolean` | `false` | Show overlay when open | | **closeOnDocumentClick** | `boolean` | `false` | Close on content area click | | **animate** | `boolean` | `true` | Enable open/close animations | | **enableDock** | `boolean` | `false` | Enable dock/minimize mode | | **dockSize** | `string \| number` | `'auto'` | Width when docked | | **enableGestures** | `boolean` | `true` | Touch swipe gestures | | **enableRtl** | `boolean` | `false` | Right-to-left layout | ## Common Use Cases - **Admin Dashboard Navigation** - Top header with collapsible sidebar menu - **Mobile App Navigation** - Hamburger menu with drawer sidebar - **E-commerce Product Filter** - Left sidebar with expandable categories - **Documentation Sites** - Persistent table of contents sidebar - **Settings Panels** - Floating right sidebar for preferences - **Multi-panel Layouts** - Multiple sidebars on different sides ---