React Drawer

  • This popular navigational component can be permanently displayed, shown and hidden on command. It's also easy to integrate into any router library.
  • Part of the KendoReact library along with 100+ professional UI components built with React for React, from the ground up.
  • Get started quickly with our award-winning support, detailed documentation, interactive demos and instructor-led training.
  • Overview

    Popularized by mobile applications, the React Drawer component has become a staple as a navigational component for desktop and responsive web applications alike. The KendoReact Drawer component offers a navigation that can be permanently displayed, shown and hidden on command, and offers various styles for presenting navigation items.

    See React Drawer Overview demo

    React Drawer - Overview, KendoReact UI Library
  • Display Modes

    The KendoReact Drawer component offers several display modes. This includes controlling if the React Drawer pushes content to the side as it expands or if it is displayed as an overlay on top of the content. Developers can also control whether navigation items are displayed with text and icons or just icons via the compact mini view.

    See React Drawer Display Modes demo

    React Drawer - Display Modes, KendoReact UI Library
  • Positioning

    Thanks to its position property, the KendoReact Drawer can be specified to be rendered in any position in relation to the page content.

    See React Drawer Positioning demo

    React Drawer - Positioning, KendoReact UI Library
  • Routing

    As the component will often be used for navigation, the KendoReact Drawer component can easily integrate into any router library and be passed the appropriate routes for each Drawer item.

    See React Drawer Routing demo

  • Custom Rendering

    The KendoReact Drawer enables developers to customize the content of each of its items by utilizing a custom renderer.

    See React Drawer Custom Rendering demo

    React Drawer - Custom Rendering, KendoReact UI Library
  • Globalization

    By default, the React Drawer component will be rendered on the left-hand side, but for applications that require right-to-left display, the Drawer can easily be rendered on the right-hand side.

    See React Drawer Globalization demo

    React Drawer - Globalization, KendoReact UI Library

All KendoReact Components

waves bg

Next Steps

Visit Our Demos

See KendoReact in action and check out how much it can do out-of-the-box.

See Pricing

Buy an individual license for KendoReact, or treat yourself to Kendo UI, our complete JavaScript bundle.

Start Free Trial

Try KendoReact with dedicated technical support.