Guide for implementing Syncfusion Angular Sidebar component for navigation, collapsible menus, and dynamic content. Use this when creating sidebars with multiple positioning options, animations, gestures, docking, responsive behavior, TreeView/ListView content, and backdrop overlays. This skill covers sidebar navigation, toggle menus, responsive navigation panels, collapsible layouts, and expanding/collapsing navigation elements.
Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Um comando direto ignora o prompt de revisão. Verifique a origem antes de executá-lo.
Guide for implementing Syncfusion Angular Sidebar component for navigation, collapsible menus, and dynamic content. Use this when creating sidebars with multiple positioning options, animations, gestures, docking, responsive behavior, TreeView/ListView content, and backdrop overlays. This skill covers sidebar navigation, toggle menus, responsive navigation panels, collapsible layouts, and expanding/collapsing navigation elements.
The Sidebar is an expandable and collapsible navigation component that acts as a side container for primary or secondary content alongside main content. It supports flexible show/hide behavior, multiple positioning modes (left, right, top, bottom), various expand types (Push, Slide, Over, Auto), docking for compact states, touch gestures, animations, responsive behavior, and rich content including TreeView and ListView.
When to Use This Skill
Implementing collapsible navigation menus or sidebars
Creating responsive navigation that adapts to screen size
Building expandable panels with icon-only docked states
Adding gesture-based sidebar toggle on touch devices
Positioning sidebars in various directions (left, right, top, bottom)
Implementing backdrop overlays to focus on sidebar content
Creating multi-level navigation with TreeView or ListView
Managing sidebar visibility with auto-close behavior
Building toggle buttons with show(), hide(), toggle() methods
Specifies whether the sidebar closes when clicking outside of it on the main content area.
// Example: Auto-close sidebar on document click
<ejs-sidebar [closeOnDocumentClick]="true"></ejs-sidebar>
// Example: In componentthis.closeOnClick = true;
dockSize
Type:string | number | Default:'auto'
Specifies the width of the sidebar when in dock state (collapsed but still visible with icons).
// Example: Set dock size to 72 pixels
<ejs-sidebar [dockSize]="'72px'" [enableDock]="true"></ejs-sidebar>
// Example: Set as number<ejs-sidebar [dockSize]="72" [enableDock]="true"></ejs-sidebar>// Example: In componentpublicdockSize: string = '72px';
enableDock
Type:boolean | Default:false
Enables the docking state where sidebar shows icons only and expands on hover or click.
// Example: Enable docking for icon-only sidebar
<ejs-sidebar [enableDock]="true" [dockSize]="'72px'">
<divclass="sidebar-item"title="Home"><iclass="e-icons e-home"></i></div><divclass="sidebar-item"title="Settings"><iclass="e-icons e-settings"></i></div>
</ejs-sidebar>
// Example: In componentpublic enableDock = true;
public dockSize = '72px';
enableGestures
Type:boolean | Default:true
Enables touch gestures (swipe) to open/close the sidebar on touch devices.
// Example: Enable gesture support (default)
<ejs-sidebar [enableGestures]="true"></ejs-sidebar>
// Example: Disable gestures for specific use cases<ejs-sidebar [enableGestures]="false"></ejs-sidebar>
enablePersistence
Type:boolean | Default:false
Enable persisting the sidebar state (open/closed, position, type) between page reloads using localStorage.
// Example: Enable persistence to remember sidebar state
<ejs-sidebar [enablePersistence]="true"></ejs-sidebar>
// Persisted states:// 1. Position (Left/Right)// 2. Type (Push/Slide/Over/Auto)// 3. Open/Closed state
enableRtl
Type:boolean | Default:false
Specifies right-to-left layout for the sidebar, useful for RTL languages like Arabic and Hebrew.
// Example: Enable RTL layout
<ejs-sidebar [enableRtl]="true"></ejs-sidebar>
// Example: Dynamically set based on languagepublic isRtl = document.documentElement.lang === 'ar';
<ejs-sidebar [enableRtl]="isRtl"></ejs-sidebar>
isOpen
Type:boolean | Default:false
Gets or sets whether the sidebar is in open (expanded) or closed (collapsed) state.
// Example: Initially open sidebar
<ejs-sidebar [isOpen]="true"></ejs-sidebar>
// Example: Initially closed (default)<ejs-sidebar [isOpen]="false"></ejs-sidebar>// Example: Toggle state from component@ViewChild('sidebar') sidebar?: SidebarComponent;
toggleOpen() {
this.sidebar!.isOpen = !this.sidebar!.isOpen;
}
// Note: When sidebar type is 'Auto', this property is ignored on mobile devices
mediaQuery
Type:string | MediaQueryList | Default:null
Specifies a media query string that automatically opens the sidebar when the query matches.
// Example: Open sidebar on screens wider than 600px
<ejs-sidebar [mediaQuery]="'(min-width: 600px)'"></ejs-sidebar>
// Example: Using MediaQueryList objectpublic mediaQuery = window.matchMedia('(min-width: 768px)');
<ejs-sidebar [mediaQuery]="mediaQuery"></ejs-sidebar>// Example: Common breakpoints// Mobile: '(max-width: 600px)'// Tablet: '(min-width: 601px) and (max-width: 1024px)'// Desktop: '(min-width: 1025px)'
position
Type:SidebarPosition | Default:'Left'
Specifies the position of the sidebar: 'Left' or 'Right'.
// Example: Position sidebar on the left (default)
<ejs-sidebar [position]="'Left'"></ejs-sidebar>
// Example: Position sidebar on the right<ejs-sidebar [position]="'Right'"></ejs-sidebar>// Example: Set position dynamicallypublicsidebarPosition: SidebarPosition = 'Left';
<ejs-sidebar [position]="sidebarPosition"></ejs-sidebar>
Available values:
'Left' - Sidebar appears on the left side
'Right' - Sidebar appears on the right side
showBackdrop
Type:boolean | Default:false
Specifies whether to display an overlay backdrop on the main content when sidebar is open.
// Example: Show backdrop overlay
<ejs-sidebar [showBackdrop]="true"></ejs-sidebar>
// Example: Backdrop with auto-close on click<ejs-sidebar [showBackdrop]="true" [closeOnDocumentClick]="true"></ejs-sidebar>// Example: Combine with other properties<ejs-sidebar
[showBackdrop]="true"
[closeOnDocumentClick]="true"
[type]="'Over'"></ejs-sidebar>
target
Type:HTMLElement | string | Default:null
Specifies which element the sidebar will affect (push/slide/transform). See Target Property Behavior section above.
⚠️ Important: When using explicit target with transform types (Push/Slide), include an inner wrapper <div> inside the target container.
// ✅ Example: Explicit targeting with ID selector (CORRECT - with wrapper)
<ejs-sidebar [target]="'#content-area'" [type]="'Push'"></ejs-sidebar>
<divid="content-area"><div><!-- Required wrapper for transforms --><div>Content here</div></div></div>// ✅ Example: Explicit targeting with CSS class (CORRECT - with wrapper)<ejs-sidebar [target]="'.main-content'" [type]="'Push'"></ejs-sidebar><divclass="main-content"><div><!-- Required wrapper for transforms --><div>Content here</div></div></div>// ✅ Example: Pass HTMLElement directly@ViewChild('targetDiv') targetElement?: ElementRef;
<ejs-sidebar [target]="targetElement?.nativeElement" [type]="'Push'"></ejs-sidebar><div #targetDiv><div><!-- Required wrapper for transforms --><div>Content here</div></div></div>
type
Type:SidebarType | Default:'Auto'
Specifies how the sidebar expands: 'Push', 'Slide', 'Over', or 'Auto'.
// Example: Push type - sidebar pushes content aside
<ejs-sidebar [type]="'Push'"></ejs-sidebar>
// Example: Slide type - sidebar slides over and translates content<ejs-sidebar [type]="'Slide'"></ejs-sidebar>// Example: Over type - sidebar floats over content<ejs-sidebar [type]="'Over'"></ejs-sidebar>// Example: Auto type - Over on mobile, Push on desktop<ejs-sidebar [type]="'Auto'"></ejs-sidebar>
Available values:
'Push' - Sidebar pushes main content to the side
'Slide' - Sidebar slides and translates main content
'Over' - Sidebar floats over main content
'Auto' - Responsive (Over on mobile, Push on desktop)
width
Type:string | number | Default:'280px'
Specifies the width of the sidebar in its expanded state. Can be set in pixels, percentages, or em units.
// Example: Set width in pixels
<ejs-sidebar [width]="'300px'"></ejs-sidebar>
// Example: Set width as number (treated as pixels)<ejs-sidebar [width]="300"></ejs-sidebar>// Example: Set width in percentage<ejs-sidebar [width]="'50%'"></ejs-sidebar>// Example: Set width in em units<ejs-sidebar [width]="'20em'"></ejs-sidebar>// Example: Responsive widthpublic sidebarWidth = window.innerWidth < 768 ? '100%' : '300px';
<ejs-sidebar [width]="sidebarWidth"></ejs-sidebar>
zIndex
Type:string | number | Default:1000
Specifies the z-index of the sidebar. Only applicable when sidebar type is 'Over' or 'Auto' on mobile.
// Example: Set z-index for layering
<ejs-sidebar [zIndex]="1000"></ejs-sidebar>
// Example: High z-index to appear above other modals<ejs-sidebar [zIndex]="9999" [type]="'Over'"></ejs-sidebar>
API Methods Reference
The Sidebar component provides the following methods for programmatic control:
show(e?: Event)
Description: Shows the sidebar if it's currently closed.
Parameters:
e (optional) - The event triggering the show action (MouseEvent | Event)
Description: Applies pending property changes to the sidebar component. Use this method after dynamically changing sidebar properties to ensure changes are rendered immediately.
