Left or Right Position

Drawer is a dismissible or permanently visible panel that usually contains navigation elements.

To open or close the Drawer component in this demo, click the 'Hamburger' button. Each Drawer visibility change can adjust the layout in the following ways (see openedStateMode):

• "push"
  The Drawer partially displaces the view.

• "shrink"
  The view shrinks to accommodate the Drawer.

• "overlap"
  The Drawer overlaps the view.

Use the radio buttons at the bottom of this demo module to try different layout modes. You can also change the Drawer's position and revealMode properties.

Note this demo's markup. The Drawer definition encloses the view content (the formatted text). The Drawer's own content (navigation links) is set by the template property. Finally, the toolbar markup is separate from other elements.

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