New to Kendo UI for Angular? Start a free 30-day trial

Hierarchical Drawer

The Drawer works with a flat structure of items by design. However, many real world scenarios require a navigation with hierarchical structure.

You can achieve this by adding or removing items to and from the Drawer collection depending on the currently selected item.

Using Flat Data

The following example demonstrates how to achieve a hierarchical navigation structure by using multiple flat data sets. They hold the parent items and their corresponding children items.

The select event handler of the Drawer component determines the currently clicked item and updates the items collection accordingly.

Example
View Source
Edit In Stackblitz  
Change Theme:

Using Hierarchical Data

The following example demonstrates how to achieve the hierarchical navigation structure by using a single hierarchical data set. It holds the parent items at the root level and each of them has a corresponding children property.

As in the previous example, the select event handler of the Drawer component determines the currently clicked item and updates the items collection accordingly.

You can recursively replicate the same logic for more than two hierarchical levels by also storing the current level to which the user has expanded the Drawer.

Example
View Source
Edit In Stackblitz  
Change Theme: