DEV Community

Djamware Tutorial
Djamware Tutorial

Posted on

Build a Multilevel Accordion Menu in Ionic with Angular

#ionic #angular #javascript #webdev

Creating a nested or multilevel accordion menu is a common requirement for complex mobile apps. In this tutorial, we’ll walk through building a clean, responsive multilevel accordion menu using Ionic with Angular.

This post has been updated to use Ionic 8 and Angular 20. Let’s get started!

🛠 Prerequisites

Before we dive in, make sure you have the following:

  • Node.js and npm installed
  • Ionic CLI installed (npm install -g @ionic/cli)
  • Basic knowledge of Angular and Ionic

⚙️ Step 1: Create a New Ionic Angular App 

ionic start multilevel-accordion blank --type=angular
cd multilevel-accordion
Enter fullscreen mode Exit fullscreen mode

📁 Step 2: Define the Accordion Menu Data

In home.page.ts:

menuItems = [
  {
    title: 'Menu 1',
    expanded: false,
    children: [
      {
        title: 'Submenu 1-1',
        expanded: false,
        children: [
          { title: 'Submenu 1-1-1' },
          { title: 'Submenu 1-1-2' }
        ]
      },
      {
        title: 'Submenu 1-2'
      }
    ]
  },
  {
    title: 'Menu 2',
    expanded: false,
    children: [
      { title: 'Submenu 2-1' },
      { title: 'Submenu 2-2' }
    ]
  }
];
Enter fullscreen mode Exit fullscreen mode

🧠 Step 3: Create the Recursive Accordion Component

➕ Generate the component: 

ionic generate component accordion
Enter fullscreen mode Exit fullscreen mode

✏️ accordion.component.ts 

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-accordion',
  templateUrl: './accordion.component.html',
  styleUrls: ['./accordion.component.scss']
})
export class AccordionComponent {
  @Input() items: any[] = [];

  toggle(item: any) {
    item.expanded = !item.expanded;
  }
}
Enter fullscreen mode Exit fullscreen mode

🧾 accordion.component.html 

<ion-list *ngFor="let item of items">
  <ion-item (click)="toggle(item)">
    {{ item.title }}
    <ion-icon
      [name]="item.expanded ? 'chevron-down' : 'chevron-forward'"
      slot="end"
      *ngIf="item.children"
    ></ion-icon>
  </ion-item>
  <div *ngIf="item.expanded && item.children" class="sub-menu">
    <app-accordion [items]="item.children"></app-accordion>
  </div>
</ion-list>
Enter fullscreen mode Exit fullscreen mode

💅 accordion.component.scss 

.sub-menu {
  padding-left: 20px;
  border-left: 2px solid #ccc;
}
Enter fullscreen mode Exit fullscreen mode

🏠 Step 4: Use the Accordion in Home Page 

<ion-header>
  <ion-toolbar>
    <ion-title>
      Accordion Menu
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <app-accordion [items]="menuItems"></app-accordion>
</ion-content>
Enter fullscreen mode Exit fullscreen mode

🔄 Step 5: Add Component to Module

In app.module.ts or home.module.ts:

import { AccordionComponent } from '../components/accordion/accordion.component';

@NgModule({
  declarations: [AccordionComponent],
  exports: [AccordionComponent]
})
Enter fullscreen mode Exit fullscreen mode

✅ Final Result

You now have a working multilevel accordion menu in your Ionic Angular app, fully expandable with infinite nesting via recursion.

🔗 Original Tutorial

This post was originally published on Djamware:
👉 Build a Multilevel Accordion Menu in Ionic with Angular

💬 Questions?

Let me know in the comments if you have any questions or improvements!

Top comments (0)