DevExtreme v24.2 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

React Drawer - 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.

To give you the ability to edit code on the fly, the demo uses SystemJS. For this reason, launching the demo takes some time. We strongly recommend that you do not use this approach in real projects.
Backend API

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.