Collapsible Side Menu


I tried to create a collapsible side menu like this, based on this sample template from @Teodor .

I saw there is a variable ‘sidebartoggle’, that changes the icon button. However, still can’t get an idea of how the side menu hides/shows. I don’t see any dynamic attributes there.

Thank you!

This may help you
YouTube Video

1 Like

Noted, will check…

Hi @mohif1995 in the tutorial they are using off-canvas, then apply CSS provided. But until the end of video, the side menu is no longer collapsible as per the sample template I mentioned above. Do you have any other references or video tutorials in regards to achieving this layout?

With Bootstrap 5 you have a built-in component called offcanvas. It is used exactly for such cases, so no need of the custom solution I posted some time ago.

1 Like

Noted for this offcanvas, found the tutorial on Wappler Youtube.

However, I would like to create a sidebar when hide becomes an icon only like below screenshot.

1 Like

If you haven’t got a solution yet. I may have one for you. I used @ben tutorial in this thread. Combining his other thread here.

I created my own css file called offcanvas.css

.offcanvas {
    width: 250px; /*adjust as required*/
        --offcanvas-width: 250px;

#main {
    -webkit-transition: margin-left .5s;
    transition: margin-left .5s; /*sliding effect*/

@media (min-width: 992px) {
    main {
        margin-left: var(--offcanvas-width);
    .offcanvas-backdrop::before {
        display: none;

Used his Java script from the thread.

To have it auto show. Select the Auto Show in offcanvas Main.

Hope that helps. Also thanks @ben


Hi @eric,
Thank you for the enlightmen… will try now…

It works… thank you!

1 Like