Build responsive sidebar navigation with Syncfusion Sidebar component. Supports multiple expand types (Over, Push, Slide, Auto), docking, animations, and gestures. Triggers when building navigation menus, mobile-friendly sidebars, dockable panels, or sidebars with list/tree views in TypeScript applications.
The Sidebar is an expandable and collapsible navigation component that acts as a side container alongside main content. It's ideal for building responsive navigation menus, dockable panels, and mobile-friendly layouts in TypeScript applications using Syncfusion Essential JS 2.
Read the appropriate reference file based on your task:
📄 Read: references/getting-started.md (~150 lines)
Two distinct modes for controlling which element the sidebar affects:
Implicit Targeting (Recommended - Default):
<div>Explicit Targeting (Advanced):
[target]="'#selector'" property<div> wrapper inside target container for CSS transforms📄 Read: references/positioning-and-target.md (~160 lines)
📄 Read: references/sidebar-types-and-positions.md (~180 lines, with TOC)
📄 Read: references/open-and-close.md (~250 lines)
show(), hide(), toggle() methodsopen, close, change with EventArgs propertiescreated, destroyedargs.cancelargs.isInteracted📄 Read: references/auto-close-responsive.md (~140 lines)
mediaQuery property for responsive breakpoints📄 Read: references/docking-sidebar.md (~170 lines, with TOC)
enableDock and dockSize properties📄 Read: references/animations-and-gestures.md (~200 lines, with TOC)
animate property and timing configuration📄 Read: references/content-integration.md (~180 lines, with TOC)
📄 Read: references/styling-and-theming.md (~200 lines, with TOC)
📄 Read: references/troubleshooting.md (~120 lines)
📄 Read: references/api-methods-properties.md (~580 lines, comprehensive API coverage)
type, position, width, target, showBackdrop, animate, closeOnDocumentClick, enableGestures, enableDock, dockSize, mediaQuery, zIndex, isOpen, enableRtl, enablePersistenceshow(), hide(), toggle(), getRootElement(), destroy(), refresh(), dataBind()addEventListener(), removeEventListener()import { Sidebar } from '@syncfusion/ej2-navigations';
// Create sidebar - automatically targets next sibling div
let sidebar: Sidebar = new Sidebar({
type: 'Push',
width: '280px'
});
sidebar.appendTo('#sidebar');
// Toggle on button click
document.querySelector('#toggle')?.addEventListener('click', () => {
sidebar.toggle();
});
<!-- HTML Structure - sidebar targets main-content automatically -->
<aside id="sidebar">
<div class="title">Navigation Menu</div>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</aside>
<!-- Next sibling - automatically becomes target -->
<div id="main-content">
<button id="toggle">Toggle Sidebar</button>
<div class="content">Main content here</div>
</div>
let sidebar: Sidebar = new Sidebar({
type: 'Push',
target: '#content-area', // Explicit target selector
width: '280px'
});
sidebar.appendTo('#sidebar');
<!-- Explicit target requires inner wrapper div -->
<aside id="sidebar">
<div class="title">Navigation</div>
</aside>
<div id="content-area"> <!-- Explicit target -->
<div> <!-- REQUIRED: Inner wrapper -->
<button id="toggle">Toggle</button>
<div class="content">Main content</div>
</div>
</div>
let sidebar: Sidebar = new Sidebar({
type: 'Auto', // Over on mobile, Push on desktop
mediaQuery: window.matchMedia('(max-width: 768px)'),
width: '280px'
});
sidebar.appendTo('#sidebar');
let sidebar: Sidebar = new Sidebar({
enableDock: true,
dockSize: '72px',
width: '220px'
});
sidebar.appendTo('#sidebar');
// CSS for docked state
// .e-dock.e-close span.e-text { display: none; }
// .e-dock.e-open span.e-text { display: inline-block; }
let sidebar: Sidebar = new Sidebar({
open: (e) => console.log('Sidebar opened'),
close: (e) => console.log('Sidebar closed'),
showBackdrop: true
});
sidebar.appendTo('#sidebar');
// Programmatic control
document.querySelector('#open')?.addEventListener('click', () => sidebar.show());
document.querySelector('#close')?.addEventListener('click', () => sidebar.hide());
document.querySelector('#toggle')?.addEventListener('click', () => sidebar.toggle());
| Property | Type | Default | Purpose |
|---|---|---|---|
type | 'Over' | 'Push' | 'Slide' | 'Auto' | 'Auto' | Expand behavior |
position | 'Left' | 'Right' | 'Left' | Sidebar position |
width | string | '100%' | Sidebar width |
target | string | null | Target element selector (explicit) |
enableDock | boolean | false | Enable dock/collapsed state |
dockSize | string | '52px' | Width when docked |
showBackdrop | boolean | false | Show overlay backdrop |
animate | boolean | true | Enable animations |
mediaQuery | MediaQueryList | null | Responsive breakpoint |
isOpen | boolean | false | Initial open state |
Next Steps: Choose a reference file based on your current task and read the detailed documentation. Start with "Getting Started" if this is your first time using the Sidebar component.