Forum Documentation Showcase Pricing Learn more

Link pages in slidebar menu

How do we link pages for navigation with the options in a slidebar menu?

The way to do is is to trigger a workflow when the user clicks on an option and use a condition to know which option he clicked to, and then use a change page action. See the image below

6 Likes

Just to add … Bubble puts the quotes in for you, so just type Home and you get “Home” as above. Don’t, like me, type “Home” as you get ““Home”” and it won’t work :smile:

6 Likes

Hi @emmanuel

I have trawled through the forums and have come across this thread that clearly details how to work with the Side Menu plugin, I still have some issues and was hoping for your assistance…

I have a group that contains the side menu, the first option is “PROFILE” and when clicked I would like it to navigate by hiding the current group and then showing another.

At the moment when I click PROFILE from the side menu nothing is happening, I have tried to debug by stepping through with the Inspect tool but nothing is showing…

Initially a suspected that it may have been case sensitive but that is not the case…any ideas?

thank you

Rogelio

Are you sure you don’t have more than one slideable menu in the page? don’t put it in a group, it should be at the top level.

@emmanuel I do have more than one slide menu, and I get how this may be causing some issues, I have them in each group as I have set the width & length to take up the size of the index (background) page as I have an image background (the same) in all three groups. If I move the slide menu to the top level formatting won’t look right.

Why don’t you have a header group that contains the slidable element, and then have the groups show and hide below. That’s how we did it for the bubble native app in the App Store.

It’s really about design choices here, there should be a way to get what you want. What is certain is that it won’t work if you have more than one menu on the page (it’s a design issue with the open source plugin we use)

1 Like

@emmanuel

ok that makes sense -

can I ask what resolution is your Bubble native app set at?

We use 380px width by 650px height.

How do you link to a reusable element that is a pop up?

H Emmanuel,

Do you have the link reference to see how you did it?

Trying to set up a profile page (basic user info, password change, setup …) with a side bar that does not reload everytime you click on one of the selection (basic info…) to make it much faster and smoother for the user to see the information requested.

Thank you
Gil

Hi Emmanuel!

I have the slide menu in the header. I havebeen trying to ungroup it, but I have many groups in the header, in order to keep the page responsive and make it behave correctly. So I cant make the slide menu to be on top of all o the other elements and arrange the workflow. How can I keep it outside the other groups? Or what else should I do?

It’s not really easy to help like this, without a practical situation. You can have more than one slidable menu per page now, so that could make things simpler.

I just worked it out! I was just using the wrong parameter so I couldn`t find the SlideBar element.
:slight_smile:

Thanks for your response!

1 Like

I am having real trouble with my Slidebar menu. I have two slidebar elements for two different types of users both of which are in separate header groups. When I make a selection from the Slide Bar it doesn’t load the selected group. Any help please would be appreciated.

where does the condition “and when this Slidebar Menu’s option is Home” get added? Does a custom condition need to be added or is the option for a condition already existing?

I should be more specific: in your example screen shot above, it says “And when…” but when I create the second condition it states "Only when… " which obviously not the same thing. Where is “and when…” located/supported?

@qkarmark It’s the same. “And when” was changed to “only when” when action conditions were introduced. So, place the condition on the event “when slide menu is clicked only when option is xyz” and it will do what you need.

Ok thanks. Well that’s what I have and the menu won’t work - my workflow looks basically exactly the same :frowning:

The option text needs to match exactly the same. Check your spelling & case. If that still wasn’t it, feel free to share a link!

Well crap: thanks… I had no idea that case was relevant, it works now!

1 Like