Making a Collapsible and Multi Level Menu in Quasar

Hello friends, welcome to our new tutorial series. This is about my favorite framework, Quasar. Quasar is a great framework for any type of development you have on your mind. The only thing, you must know some basics of the VUE JS. However, I should not define what is VUE and Quasar here. Because this tutorial is for developers who are using quasar for now.

However, when I was developing my project, my client asked to go with q collapsible menu to the drawer. Then I could find the below code lines and I could fulfill the client’s requirement. I’m not going to talk too much. Just copy the code and paste it inside of your drawer.

<q-expansion-item
icon="menu_open"
label="Menu Levels"
>
<q-item
class="q-ml-xl"
active-class="q-item-no-link-highlighting"
>
<q-item-section>
<q-item-label>Level 1</q-item-label>
</q-item-section>
</q-item>
</q-expansion-item>
<q-expansion-item
:header-inset-level="0.85"
label="Level 2"
>
<q-item
class="q-ml-xl"
style="margin-left: 55px !important;"
active-class="q-item-no-link-highlighting"
>
<q-item-section>
<q-item-label>Level 2.1</q-item-label>
</q-item-section>
</q-item>
</q-expansion-item>
<q-expansion-item
:header-inset-level="1"
label="Level 2.2"
>
<q-item
style="margin-left: 65px !important;"
active-class="q-item-no-link-highlighting"
>
<q-item-section>
<q-item-label>Level 2.2.1</q-item-label>
</q-item-section>
</q-item>
<q-item
style="margin-left: 65px !important;"
active-class="q-item-no-link-highlighting"
>
<q-item-section>
<q-item-label>Level 2.2.2</q-item-label>
</q-item-section>
</q-item>
</q-expansion-item>

I hope the above code will work properly without any errors. If you got any, let us know by leaving a comment below. Thank you for being with us.