How do I create a menu that collapses like in the Syncfusion main bar?

[Bob]

I want to have a menu in my website at the top right of the page that collapses down to a hamburger type for smaller views, like with mobile or small screens.

The functionality that I am looking for is exactly like what you have in the syncfusion.com/forums page where it shows a black menu bar with a logo and "products", "Solution Services"... and "Free Trial.". When that is viewed on smaller resolutions it drops down to a hamburger and just the button and that's exactly what I need.

I am coming from a Bootstrap layout where I do this using the classes, but can't figure out the equivalent so that I am able to use the Syncfusion control instead.

[Gayathri KarunaiAnandam]

Hi Bob, 

 

Thank you for contacting Syncfusion support. 

 

We have checked your reported query. We can achieve your requirement by using window resize event as demonstrated in the below code snippet 

 

 

Index.razor 

<ejs-menu id="menu" items="ViewBag.menuItems" created="created"></ejs-menu> 

 

<script> 

    

    function created(args) { 

         

        window.addEventListener('resize', myFunction); 

         

    } 

    function myFunction() { 

       var menuObj = document.getElementById("menu").ej2_instances[0]; 

        if (window.outerWidth < 750) { 

            menuObj.hamburgerMode = true; 

            } else { 

                menuObj.hamburgerMode = false; 

        } 

    } 

     

</script> 

 

For your reference, we have prepared a sample based on this issue. Please check the below link. 

 

Sample: https://www.syncfusion.com/downloads/support/forum/162513/ze/Menu_hamburger2095731135 

 

Please check the above link and get back to us, if you need further assistance. 

 

Regards, 

Gayathri K 

[Bob]

Thank you for the quick response. That was exactly what I was missing so I think I'm good now.

[Gayathri KarunaiAnandam]

Hi Bob, 

Thanks for the update. 

 

We are happy to hear that your requirement has been fulfilled. Please feel free to contact us if you need any further assistance on this. 

 

 

Regards, 

Gayathri K