Hierarchical Drawer

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

To achieve this behavior, define parent-child relationships in the Drawer items data. This is demonstrated in the example below.

Change Theme

Theme

Loading ...

Setup

To achieve a hierarchical items structure, follow the steps below:

1. Add an id to each item in the Drawer items collection. It is used internally as a unique identifier for each item.

   ts

       public items: Array<DrawerItem> = [
           { id: 0, text: 'Inbox', icon: 'k-i-inbox', selected: true },
           { id: 1, text: 'Notifications', icon: 'k-i-bell' }
       ]

2. To render an item as a nested child of another one, add the parentId field to it. Its value should be the id of the corresponding parent item. It is used internally by the Drawer to map existing parent-child relationships. Items without a parentId field will be rendered as root-level items, and items with a parentId field will be considered nested child items.

   The Drawer supports up to 5 levels of nested items.

   ts

       public items: Array<DrawerItem> = [
           { id: 0, text: 'Inbox', icon: 'k-i-inbox', selected: true },
           { id: 1, parentId: 0, text: 'Notifications', icon: 'k-i-bell' }
       ]

3. Set the isItemExpanded input of the Drawer. It accepts a boolean callback function, which is executed for each Drawer item and determines its expanded state.

   If an isItemExpanded callback is not provided, all Drawer items will be rendered as collapsed. This means that only root level items will be visible.

   ts

       // Collection with the indices of all expanded items
       public expandedIndices = [0];
   
       // Predicate function, which determines if an item is expanded
       public isItemExpanded = (item: any): boolean => {
           return this.expandedIndices.indexOf(item.id) >= 0;
       }

4. Lastly, handle the select event of the Drawer and include the required custom logic for expanding or collapsing the selected item.

   ts

       public onSelect(ev: DrawerSelectEvent): void {
           this.selected = ev.item.text;
           const current = ev.item.id;
   
           if (this.expandedIndices.indexOf(current) >= 0) {
               this.expandedIndices = this.expandedIndices.filter(
                   (id) => id !== current
               );
           } else {
               this.expandedIndices.push(current);
           }
       }

Suggested Links

• API Reference of the Drawer