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 100+ 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.

Example
View Source
Edit In Stackblitz  
Change Theme:

Key Features

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

In this article

Not finding the help you need?