Forum Documentation Showcase Pricing Learn more

Slideable Menu Question

I have done this without code. All you need to do as add a group underneath it and add and remove the left border to the size of the floating group as a menu. It takes a little bit of thinking but it works well for me.

I would still be curious to know how to do it with JavaScript and CSS. :slight_smile:

1 Like

It will depend on how you have structured your app.

I use the html IDs of the Bubble elements I am planning on moving off and on canvas. In my case #sidebar and #main

If you have and app that has different pages you will have to assign those IDs(or what you choose) to the all the sidebars and main pages.

You will also need to use the JS toolbox plugin.

1 Like

I am on my mobile now but will provide code later once I get on my desktop.

Alternatively, if you want a bubble no code solution, you can use the same drag and drop group to do this. Use the drag drop group element, and when the menu is visible move it x pixels right, then x pixels left when not visible.

Awesome. Thanks!

Show sidebar

$("#main").animate({'padding-left' : '240px'}, "250ms");
$("#sidebar").animate({'left' : '0px'}, "250ms");
$("#sidebar").css("z-index", "999");

Hide Sidebar

$("#main").animate({'padding-left' : '0px'}, "250ms");
$("#sidebar").animate({'left' : '-240px'}, "250ms");
$("#sidebar").css("z-index", "4");

In this example the sidebar width is 240px. I also have to change z-index due to how I have my page designed.

1 Like

Thanks JonL. One last question, do you put that in an HTML element, CSS Element, or Javascript element. Also, can I put that in a reusable element as long as each page has a main element?

I just noticed something. Did you make your own sidebar instead of using the one that comes with bubble?

I put that in a JS action in the workflow system using the plugin I mentioned before(JS Toolbox)

Yes, I created my own sidebar using a floating group relative to top and bottom.

Does this mean your page is “main” and your menu is called “sidebar”?

I think this is exactly how I do it too, just without code. You have to code it to show and hide depending on page width and if a button is pressed right?

In my case I use an animated(CSS and JS again) hamburger icon to toggle the sidebar.

The problem with this method is that you move stuff off the canvas. We tried to find a reliable way to resize the canvas to fit the incoming group, but weren’t happy with the result.

In the end we opt for a ribbon and custom slide-out floating group that sits on top of the page (and covers some part of the content). The choice is more related to the user action: at that point they need to navigate to a new section of the app so they need to look only at the side bar and do an action.

If you need a user to see both at the same time, then maybe its better to show a sidebar always.

1 Like

It is an off-canvas slidable menu after all :slight_smile:

Edit: Got what you meant. You mean the right side of the dashboard. So it’s squeezed when the menu is out. I can see how that would be a problem with Bubble standard design.

In my case, in desktop view, menu is always visible so my approach only works for mobile view. As you say it just matches user intent which is to click on something and not view content.

I’m looking for a way to do a slide out menu to create a calendar just like google calendar

After reading through this topic, I believe there could be a coded approach and a no code approach.

For coded approach (I’m not a coder but found things on bubble forum for these effects) I would resize the content that I want to shrink or expand based on visibility of the menu. There is some CSStools threads that discuss and provide the code for resizing elements (make sure to use ID attribute for referencing).

If I were to do a no code approach I would have two designs for the content that is to be expanded or shrunk depending on visibility and then have conditionals to hide/show them based on the visibility of the menu. For the slide effect, I would use the bubble animate in a workflow to get any of their preloaded animation options.

Another idea as well combining what was mentioned by @jcindy81 with idea of drag and drop, especially if you can’t move the group by x-coordinate is to have the after drop effect be to go back instead of hide and then use a conditional to hide it when an icon is clicked or not clicked ( for this I usually set custom states with 1 and 0 values as I have found yes/no values to not always work ** I had to use this to get a group focus element to hide/show correctly )

Speaking of group focus you could always use one of those as the menu and cover the content, but if covering content is not desired, I’d probably have two designs and hide/show depending on visibility of menu.

I haven’t tried this approach but if you want your sidebar to be floating I think it will not play well.

You can use the Slideable menu (bdk) plugin. It does all this without writing any code.

As I’m seeing in the demo, the Slideable menu will not squeeze the content on the page. Effectively, this will push the calendar off to the side leaving only one “active” workspace. Is that correct? Is there a way to squeeze a calendar made of native bubble elements when the menu comes out?

Hi @duke.severn,

You’re correct in that it won’t squeeze the content on the page. It’s gonna ‘push it’.
However, both the sections do remain active i.e. you can click any button / text etc. on either at any point in time


I am trying this method with the javascript and it works perfectly for group elements…however it doesn’t function properly when the elements are floating groups

Have you had any issues with this?

My main reason for attempting the Z-index approach is because there is a bug with the “send to back” and “bring to front” commands and my page isn’t functioning properly after the bug affected it.


I have tested this an I was incorrect to state it doesn’t work with floating groups…it does work

HOWEVER, it will not work if you were to use the “replace” function in the editor on a element that was originally a group and you “replace” it with a floating group.

This seems to be the problem I am having with my floating group side menu being unresponsive to the “send to back” and “bring to front” commands that led me to test the Z-index method.

So, for anybody who is ever having issues like this, that elements are not responding to the “bring to front” and “send to back” commands, which I suppose are pre-built bubble z-index placements, it might be because you have used the “replace” feature and this somehow causes the problem.