Your search did not match any results.

Left or Right Position


The Drawer is a dismissible or permanently visible panel used for navigation in responsive web applications. On opening, the Drawer can interact with the view in several modes: "shrink", "push", and "overlap". The view's content (an HTML string in this demo) is part of the Drawer's markup. The Drawer's content is defined using a template. Note that the Drawer does not interact with the toolbar because the latter is not defined in the Drawer's markup.

In this demo, you can use radio buttons under the Drawer to change its position and behavior.

To get started with the DevExtreme Drawer component, refer to the following tutorial for step-by-step instructions: Getting Started with Navigation Drawer.

Backend API
Copy to CodeSandBox
<dx-toolbar [items]="toolbarContent"> </dx-toolbar> <dx-drawer [openedStateMode]="selectedOpenMode" [position]="selectedPosition" [revealMode]="selectedRevealMode" template="template" [(opened)]="isDrawerOpen" [height]="400" [closeOnOutsideClick]="true" > <div *dxTemplate="let data of 'template'" style="width: 200px"> <dx-list class="panel-list dx-theme-accent-as-background-color" [dataSource]="navigation" [hoverStateEnabled]="false" [activeStateEnabled]="false" [focusStateEnabled]="false" > </dx-list> </div> <div id="content" class="dx-theme-background-color" [innerHTML]="text"></div> </dx-drawer> <div class="options"> <div class="caption">Options</div> <div class="options-container"> <div class="option"> <label>Opened state mode</label> <dx-radio-group [(value)]="selectedOpenMode" [items]="showModes" layout="horizontal" > </dx-radio-group> </div> <div class="option"> <label>Position</label> <dx-radio-group [(value)]="selectedPosition" [items]="positionModes" layout="horizontal" > </dx-radio-group> </div> <div *ngIf="selectedOpenMode !== 'push'" class="option"> <label>Reveal mode</label> <dx-radio-group [(value)]="selectedRevealMode" [items]="showSubmenuModes" layout="horizontal" > </dx-radio-group> </div> </div> </div>
import { NgModule, Component, ViewChild, enableProdMode, } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { DxDrawerComponent, DxDrawerModule, DxListModule, DxRadioGroupModule, DxToolbarModule, } from 'devextreme-angular'; import { List, Service } from './app.service'; if (!/localhost/.test( { enableProdMode(); } @Component({ selector: 'demo-app', templateUrl: 'app/app.component.html', styleUrls: ['app/app.component.css'], providers: [Service], preserveWhitespaces: true, }) export class AppComponent { @ViewChild(DxDrawerComponent, { static: false }) drawer: DxDrawerComponent; navigation: List[]; showSubmenuModes: string[] = ['slide', 'expand']; positionModes: string[] = ['left', 'right']; showModes: string[] = ['push', 'shrink', 'overlap']; text: string; selectedOpenMode = 'shrink'; selectedPosition = 'left'; selectedRevealMode = 'slide'; isDrawerOpen = true; elementAttr: any; constructor(service: Service) { this.text = service.getContent(); this.navigation = service.getNavigationList(); } toolbarContent = [{ widget: 'dxButton', location: 'before', options: { icon: 'menu', onClick: () => this.isDrawerOpen = !this.isDrawerOpen, }, }]; } @NgModule({ imports: [ BrowserModule, DxDrawerModule, DxListModule, DxRadioGroupModule, DxToolbarModule, ], declarations: [AppComponent], bootstrap: [AppComponent], }) export class AppModule { } platformBrowserDynamic().bootstrapModule(AppModule);
::ng-deep .dx-toolbar { background-color: rgba(191, 191, 191, 0.15); padding: 5px 10px; } ::ng-deep .dx-list-item-icon-container, ::ng-deep .dx-toolbar-before { width: 36px; padding-right: 0 !important; text-align: center; } ::ng-deep .dx-list-item-content { padding-left: 10px !important; } ::ng-deep .dx-button { background-color: rgba(191, 191, 191, -0.15); border: none; } ::ng-deep .dx-list.panel-list { height: 400px; } ::ng-deep .dx-drawer-expand.dx-drawer-right .panel-list { float: right; } ::ng-deep .panel-list .dx-list-item { color: #fff; border-top: 1px solid rgba(221, 221, 221, 0.2); } ::ng-deep .panel-list .dx-list-item .dx-icon { color: #fff !important; } ::ng-deep .options { padding: 20px; background-color: rgba(191, 191, 191, 0.15); } ::ng-deep .options-container { display: flex; align-items: center; } ::ng-deep .caption { font-size: 18px; font-weight: 500; } ::ng-deep .option { margin-top: 10px; display: inline-block; margin-right: 50px; } ::ng-deep label { font-weight: bold; } ::ng-deep #content { height: 100%; padding: 10px 20px; } ::ng-deep #content h2 { font-size: 26px; }
import { Injectable } from '@angular/core'; export class List { id: number; text: string; icon: string; } const navigation: List[] = [ { id: 1, text: 'Products', icon: 'product' }, { id: 2, text: 'Sales', icon: 'money' }, { id: 3, text: 'Customers', icon: 'group' }, { id: 4, text: 'Employees', icon: 'card' }, { id: 5, text: 'Reports', icon: 'chart' }, ]; const text = ` <h2> <b>Drawer Demo</b> </h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Penatibus et magnis dis parturient. Eget dolor morbi non arcu risus. Tristique magna sit amet purus gravida quis blandit. Auctor urna nunc id cursus metus aliquam eleifend mi in. Tellus orci ac auctor augue mauris augue neque gravida. Nullam vehicula ipsum a arcu. Nullam ac tortor vitae purus faucibus ornare suspendisse sed nisi. Cursus in hac habitasse platea dictumst. Egestas dui id ornare arcu. Dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim.</p><p>Mauris rhoncus aenean vel elit scelerisque mauris pellentesque pulvinar. Neque volutpat ac tincidunt vitae semper quis lectus. Sed sed risus pretium quam vulputate dignissim suspendisse in. Urna nec tincidunt praesent semper feugiat nibh sed pulvinar. Ultricies lacus sed turpis tincidunt id aliquet risus feugiat. Amet cursus sit amet dictum sit amet justo donec enim. Vestibulum rhoncus est pellentesque elit ullamcorper. Id aliquet risus feugiat in ante metus dictum at. </p> `; @Injectable() export class Service { getNavigationList(): List[] { return navigation; } getContent(): string { return text; } }
// In real applications, you should not transpile code in the browser. // You can see how to create your own application with Angular and DevExtreme here: // window.config = { transpiler: 'ts', typescriptOptions: { module: 'system', emitDecoratorMetadata: true, experimentalDecorators: true, }, meta: { 'typescript': { 'exports': 'ts', }, 'devextreme/localization.js': { 'esModule': true, }, }, paths: { 'npm:': '', }, map: { 'ts': 'npm:plugin-typescript@8.0.0/lib/plugin.js', 'typescript': 'npm:typescript@4.3.5/lib/typescript.js', '@angular/core': 'npm:@angular/core@12.2.16', '@angular/platform-browser': 'npm:@angular/platform-browser@12.2.16', '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic@12.2.16', '@angular/forms': 'npm:@angular/forms@12.2.16', '@angular/common': 'npm:@angular/common@12.2.16', '@angular/compiler': 'npm:@angular/compiler@12.2.16', 'tslib': 'npm:tslib@2.3.1/tslib.js', 'rxjs': 'npm:rxjs@6.4.0', 'rrule': 'npm:rrule@2.6.6/dist/es5/rrule.js', 'luxon': 'npm:luxon@1.28.0/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'devextreme': 'npm:devextreme@21.2.7/cjs', 'devextreme/bundles/dx.all': 'npm:devextreme@21.2.7/bundles/dx.all.js', 'jszip': 'npm:jszip@3.7.1/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@1.5.14/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.1.47', 'devexpress-gantt': 'npm:devexpress-gantt@4.0.13', 'devextreme-angular': 'npm:devextreme-angular@21.2.7', '@devextreme/runtime': 'npm:@devextreme/runtime@2.3.14', 'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js', 'inferno-compat': 'npm:inferno-compat@7.4.11/dist/inferno-compat.min.js', 'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js', 'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js', 'inferno-hydrate': 'npm:inferno-hydrate@7.4.11/dist/inferno-hydrate.min.js', 'inferno-clone-vnode': 'npm:inferno-clone-vnode@7.4.11/dist/inferno-clone-vnode.min.js', 'inferno-create-class': 'npm:inferno-create-class@7.4.11/dist/inferno-create-class.min.js', 'inferno-extras': 'npm:inferno-extras@7.4.11/dist/inferno-extras.min.js', }, packages: { 'app': { main: './app.component.ts', defaultExtension: 'ts', }, 'devextreme': { defaultExtension: 'js', }, 'devextreme/events/utils': { main: 'index', }, 'devextreme/events': { main: 'index', }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js', }, }, packageConfigPaths: [ 'npm:@devextreme/*/package.json', 'npm:@devextreme/runtime@2.3.14/inferno/package.json', 'npm:@angular/*/package.json', 'npm:@angular/common@12.2.16/*/package.json', 'npm:rxjs@6.4.0/package.json', 'npm:rxjs@6.4.0/operators/package.json', 'npm:devextreme-angular@21.2.7/*/package.json', 'npm:devextreme-angular@21.2.7/ui/*/package.json', 'npm:devextreme-angular@21.2.7/package.json', 'npm:devexpress-diagram@2.1.47/package.json', 'npm:devexpress-gantt@4.0.13/package.json', ], }; System.config(window.config);
<!DOCTYPE html> <html xmlns=""> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <link rel="stylesheet" type="text/css" href="" /> <link rel="stylesheet" type="text/css" href="" /> <link rel="stylesheet" type="text/css" href="" /> <script src=""></script> <script src=""></script> <script src=""></script> <script src=""></script> <script src="config.js"></script> <script> System.import("app").catch(console.error.bind(console)); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <demo-app>Loading...</demo-app> </div> </body> </html>