> For the complete documentation index, see [llms.txt](https://landofcoder.gitbook.io/magento-2-megamenu/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://landofcoder.gitbook.io/magento-2-megamenu/faq/how-to-show-accordion-menu-on-desktop-view.md).

# How to show accordion menu on Desktop view?

There steps to show accordion menu on Desktop view as bellow:

<figure><img src="/files/bg0aigsJ1t8AVhZBYrx5" alt=""><figcaption></figcaption></figure>

***Demo accordion Desktop Menu***: <https://builder.landofcoder.com/demo-accordion-menu>

### **Step 1: Create Accordion Menu profile**

Add new megamenu profile as this:

<figure><img src="/files/l2DaUPSC0IVyREPC9pre" alt=""><figcaption><p>Add new accordion menu profile</p></figcaption></figure>

*Choose Desktop Template = Accordion Menu*

### **Step 2: Add custom css code**&#x20;

Please add custom css code bellow on custom css file of current theme or you can add on a**dmin > Stores > Configuration > Venustheme.com > Custom CSS** on Frontend as screenshot:

<figure><img src="/files/o0BqHqlt1WfrVaW30fBW" alt=""><figcaption><p>Open megamenu settings</p></figcaption></figure>

```
// Custom css code
.ves-megamenu.ves-daccordion .navigation .nav-item a {
    display: block;
}
.ves-megamenu.ves-daccordion >.navigation .level0 {
    float: left!important;
    border-top: 1px solid #d1d1d1;
    border-top-color: rgba(0,0,0,.08);
}
.ves-megamenu.ves-daccordion>.navigation {
    border: 1px solid rgba(0,0,0,.15);
    float: left;
    background: #f8f8f8;
}
.ves-megamenu.ves-daccordion .navigation .opener {
    display: inline-block!important;
}
.ves-megamenu.ves-daccordion .opener:before {
    content: "\e61c";
}
.ves-megamenu.ves-daccordion .opener.item-active:before {
    content: "\e60f";
}
.ves-megamenu.ves-daccordion .navigation .opener {
    position: absolute!important;
    right: 0!important;
}
```

### **Step 3: Add megamenu block on frontend layout or Widget Instance**

To show custom accordion menu on frontend, we can use layout xml to load the menu block as this:

<pre><code>&#x3C;referenceContainer name="content">
    &#x3C;block class="Ves\Megamenu\Block\Menu" name="catalog.accordionnav" ifconfig="vesmegamenu/general_settings/enabled" template="Ves_Megamenu::topmenu.phtml">
        &#x3C;arguments>
            &#x3C;argument name="alias" xsi:type="string">accordion-menu-profile&#x3C;/argument>
        &#x3C;/arguments>
<strong>    &#x3C;/block>
</strong>&#x3C;/referenceContainer>
</code></pre>

Or use widget Instance

Go to admin > Content > Element > Widgets > Add new Widget as screenshots:

<figure><img src="/files/VBCPfjLHft7NTj1nPlxL" alt=""><figcaption><p>Choose type ves megamenu: menu and design theme</p></figcaption></figure>

<figure><img src="/files/xk6PnkhHjRHmBc9NLSSy" alt=""><figcaption><p>Choose layout updates</p></figcaption></figure>

<figure><img src="/files/ZHAVWbhvdgGczMk9axwf" alt=""><figcaption><p>Choose menu profile</p></figcaption></figure>

### **Step 4: Flush cache of the site**