# How to show accordion menu on Desktop view?

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

<figure><img src="https://3877357577-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Ml4NK7Q1RRARTJZU4uN%2Fuploads%2FxWbxmGfRb79Yww5n5qQ4%2FScreenshot%20from%202023-09-26%2016-07-29.png?alt=media&#x26;token=5370ff8a-2ad5-4d46-9220-627b69957d18" 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="https://3877357577-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Ml4NK7Q1RRARTJZU4uN%2Fuploads%2FvIHRoqxHKWtuxfOzLOJK%2FScreenshot%20from%202023-09-26%2015-49-57.png?alt=media&#x26;token=e7c19af5-36b8-4d1a-b07b-adcc3be7d937" 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="https://3877357577-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Ml4NK7Q1RRARTJZU4uN%2Fuploads%2FI2DlKkalzWaNNUfUmf22%2FScreenshot%20from%202023-09-26%2015-44-39.png?alt=media&#x26;token=eddc8c48-0837-4722-91e8-8fd96cd29215" 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="https://3877357577-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Ml4NK7Q1RRARTJZU4uN%2Fuploads%2FJmRNKm9SypZetfdbqtbU%2FScreenshot%20from%202023-09-26%2015-46-20.png?alt=media&#x26;token=c658bcff-e55b-4a07-8a26-ef90bf90de4f" alt=""><figcaption><p>Choose type ves megamenu: menu and design theme</p></figcaption></figure>

<figure><img src="https://3877357577-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Ml4NK7Q1RRARTJZU4uN%2Fuploads%2FUn28A7gd7Q3NMHCHfJ1T%2FScreenshot%20from%202023-09-26%2015-46-53.png?alt=media&#x26;token=0e9b590a-dedd-406b-8fc5-f3ba8371d81f" alt=""><figcaption><p>Choose layout updates</p></figcaption></figure>

<figure><img src="https://3877357577-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Ml4NK7Q1RRARTJZU4uN%2Fuploads%2FbjJnMFj2Strev6IwRaOo%2FScreenshot%20from%202023-09-26%2015-46-59.png?alt=media&#x26;token=1a561bb7-e193-4862-98eb-57fcfcf9c119" alt=""><figcaption><p>Choose menu profile</p></figcaption></figure>

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