Components / Layout / Drawer / Overview /

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 following example demonstrates the Drawer in action.

Example

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.