Kendo UI for Angular Drawer Overview

The Kendo UI for Angular Drawer is a dismissible navigation panel in responsive web applications.

It also enables the user to change the content of a specific section of the page.

The Drawer Component is part of Kendo UI for Angular, a professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

The following example demonstrates the Drawer in action.

View Source
Change Theme:

Key Features

  • Display modes—The Drawer provides overlay and push expand modes as well as a compact mini view.
  • Interaction modes—You can set the initial expanded state of the Drawer and then change it on demand by using the available API options.
  • Positioning—The Drawer enables you to specify its position with regard to the page content.
  • Templates—You can apply custom styles to the Drawer by using templates for its collection of items, header and footer, and other elements.
  • Routing—The Drawer can utilize the Angular Router in this way enabling you to use it as a navigational component.
  • Hierarchical Drawer—Even though by design the Drawer works with a flat structure of items, it provides options for hierarchical data navigation.
  • Globalization—All Kendo UI for Angular Layout components provide globalization options.
  • Accessibility—The Drawer is accessible for screen readers and supports WAI-ARIA attributes.
  • Keyboard navigation—The Drawer supports a number of keyboard shortcuts for processing various commands.

Support and Learning Resources

Additional Resources