Docking Sidebar in Angular Sidebar component

12 Sep 20257 minutes to read

The Sidebar component supports docking, which reserves a compact, always-visible portion of the Sidebar when collapsed, ideal for displaying icons or minimal content. Docking is enabled by setting the enableDock property to true (default: false) and specifying the dockSize property (default: auto) to define the width of the docked state, using a string (e.g., "50px") or number (e.g., 50).

Configuring Docked Sidebar

In the following example, each list item includes an icon along with accompanying text. The visibility of the text is dynamically controlled through CSS rules based on the Sidebar’s state. When the enableDock property is enabled, the e-dock class is applied, adjusting the text visibility accordingly.

The following CSS, applied in styles.css, hides text in the docked (closed) state:

.e-dock.e-close span.e-text {
  display: none;
}

This CSS displays text alongside icons when the Sidebar is open:

.e-dock.e-open span.e-text {
  display: inline-block;
}

In the docked state, only icons in the list are visible, hinting at the hidden text content.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { SidebarModule } from '@syncfusion/ej2-angular-navigations'




import { Component, ViewChild } from '@angular/core';
import { SidebarComponent } from '@syncfusion/ej2-angular-navigations';

@Component({
imports: [
        
        SidebarModule
    ],


standalone: true,
    selector: 'app-root',
    styleUrls: ['./app.component.css'],
    template: ` <ejs-sidebar #dockBar id="dockSidebar" [enableDock]='enableDock' [width]='width' [dockSize]='dockSize'>
                    <div class="dock">
                        <ul>
                            <li class="sidebar-item" id="toggle" (click)="toggleClick()">
                                <span class="e-icons expand"></span>
                                <span class="e-text" title="menu">Menu</span>
                            </li>
                            <li class="sidebar-item">
                                <span class="e-icons home"></span>
                                <span class="e-text" title="home">Home</span>
                            </li>
                            <li class="sidebar-item">
                                <span class="e-icons profile"></span>
                                <span class="e-text" title="profile">Profile</span>
                            </li>
                            <li class="sidebar-item">
                                <span class="e-icons info"></span>
                                <span class="e-text" title="info">Info</span>
                            </li>
                            <li class="sidebar-item">
                                <span class="e-icons settings"></span>
                                <span class="e-text" title="settings">Settings</span>
                            </li>
                        </ul>
                    </div>
                </ejs-sidebar>
                <div id="main-content container-fluid col-md-12 ">
                    <div class="title">Main content</div>
                    <div class="sub-title"> Click the expand icon to open and collapse icons to close the Sidebar.</div>
                </div>
                <div>
                </div>`
})
export class AppComponent {
    @ViewChild('dockBar') dockBar?: SidebarComponent;
    public enableDock: boolean = true;
    public width: string = '220px';
    public dockSize: string = '72px';
    toggleClick() {
        this.dockBar?.toggle();
    }
}
@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-navigations/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material.css';
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

See Also