All docs
V24.2
24.2
24.1
23.2
23.1
22.2
22.1
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2.
19.1
The page you are viewing does not exist in version 19.1.
18.2
The page you are viewing does not exist in version 18.2.
18.1
The page you are viewing does not exist in version 18.1.
17.2
The page you are viewing does not exist in version 17.2.

JavaScript/jQuery Drawer - Getting Started

NOTE
Before you start the tutorial, ensure DevExtreme is installed in your application.

The Drawer is a dismissible or permanently visible panel used for navigation in responsive web application layouts.

This tutorial shows how to create a Drawer that allows a user to switch between pages. The Drawer is opened and closed via a button on a toolbar.

Refer to the sections below for details on each configuration step. You can also find the full code in the GitHub repository.

View on GitHub

Create the Drawer

To create the Drawer component, you need to specify its content template. The image below shows the difference between Drawer and view content:

DevExtreme HTML5 JavaScript Drawer

Wrap the view in the Drawer in HTML markup. Then, specify a template for the Drawer's content.

It is important to specify the Drawer's height and width. Alternatively, if you implement a UI component within the Drawer component's content, you can specify the component's width property and set the view's height. The Drawer's height automatically adjusts to the view's height in this case. Refer to the following topic for details: Implement Navigation.

NOTE
You cannot set the Drawer's height or width as a percentage.

This tutorial uses the width CSS property of the Drawer's nested HTML element and specifies the component's height property.

You can also specify the minSize property to make the Drawer partially visible when it is closed.

If you run the code, you can see a partially visible Drawer and a view that displays View content.

NOTE
The Drawer UI component is not designed to contain another Drawer. Do not use nested Drawers to avoid possible issues in your application.

Open and Close the Drawer

Call the toggle() method or bind the opened property to a component property.

In the following code, a toolbar button outside the Drawer opens and closes it:

Implement Navigation

The Drawer is designed to contain navigation items. If they should nest other items, use the TreeView UI component to implement navigation. Otherwise, use the List, as this tutorial does.

Each list item should navigate to a different view. To implement this, follow the steps below:

Run the code, open the Drawer, and click its items to change the views.

Configure the Reveal Behavior

When you open the Drawer, it can slide in or expand from the closed position. Use the revealMode property to specify this behavior.

Run the code and open the Drawer. You should see that the UI component gets wider, but its content stays in place, creating an impression that the Drawer expands.

Configure Interaction with the View

When the Drawer opens, it can overlap, shrink, or partially displace the view, depending on the openedStateMode property:

Run the code, open the Drawer and you should see that it overlaps the view's text.

Change the Position

You can use the position property to anchor the Drawer to any side of the view. In this tutorial, the Drawer is in its default position (left).

For more information about the Drawer, explore the following resources: