Forum Academy Marketplace Showcase Pricing Features

[Navigation] How to create sub-navigation menu with automated scrolling when loading new page

Hi,

I would like my users to navigate my app with sub-elements that, when clicked, go to new pages at a specific positions on the page - that is, with the new page already scrolled to the right section.

I cannot figure what data to send from one page to another to achieve this. I’ve tried setting a new ‘current button’ state to the navigation section (which is a reusable element) when a sub-element is clicked. Then I put a workflow which reads 'When page is loaded and ‘Navigation’s current button is X, scroll to Anchor X’, but that did not work.

I think it’s because the previous page’s Navigation element is different from the new one’s.

Thanks for your help here.

J.

The way I’d do it is have a setting in the URL, by adding ?position=xx and the use this function on page load to extract the position https://bubble.io/reference#Data.DataSources.GetParamFromUrl.

Then, you can have some workflows that use this in a condition to scroll to the right place.

1 Like

Thanks. Where do I add a parameter to the URL?

Just do it manually in the link element (or change page), picking external URL and adding ?position=xx manually

1 Like

Works good thanks a lot for your help

Hello, everyone.

I have a similiar question, but a bit more complicated. I want to generate links, which, when opened, will navigate the user to the entry of the repeating group.

My idea was the following. Since I have a Search Box that is connected to repeating group (when autocompleted scrolls to the respective entry), I thought I could link URL’s parametr to Default Value of Search Box. But it doesn’t work because URL parametr is “text” but Default Value" should be Type.

Is there another way to do this?

The way i’d do it is have the type of thing of the page being Type, and then the link you ‘send data’ to the page with the relevant thing, and it’ll automatically populate the current page’s type with the right thing. Makes sense?

It makes…but in my case I have a page and 8 repeating groups inside it.
And what I need to is to “scroll to entry of repeating group” (not to page element), based on Get parametr from the URL.

I thought the follwoing scheme would work: “Scroll to entry of the repeating group”, where “entry to scroll to” = “Get parametr from the URL”. But it cannot work because parametr from URL - text, but “entry to scroll to” should be repeating’s group type.

When you do a search “Search box” solves this problem (by autocompleting transforms text to type). But how to do it without search box just with the URL parametr?

My understanding is that you want to send an item to a page and then, within a RepeatingGroup on the page, scroll to that item.

Here’s one solution:
Send the item to the page. If the page is not of the type of item you want to send, send the unique data for that item as a parameter - for example the unique name or key.

Then in the scroll to action search for that item based on the unique key. Makes sense?

1 Like

Geoerge,

Your understanding is a bit incorrect.
I don’t want to send an item - I want ot get parametr from URL.

I tried a simple logic:
“Scroll to entry of the repeating group”, where “entry to scroll to” = “Get parametr from the URL”.
But it cannot work because parametr from URL - text, but “entry to scroll to” should be repeating’s group type.

Sorry i didn’t explain properly.
The entry to scroll to can be searched for based on the parameter you get in the URL. Let’s say I want to scroll to a specific user in the Repeating Group. I would then make sure that user’s name is unique (or create a unique text field for the user) and then search for that user using the string from the URL

parameter.

If you are navigating from a page in Bubble to another page in the same app, you can also create a new data type that contains the data you want to send from Page A to Page B.
If say you want to display a user in a group in page A, and a book, you can create a new data type UserAndBookWrapper that contains both. This way you don’t have to use the URL parameter.

To help us better understand, please answer these questions:

  1. Where are you sending the data from? (a different page within Bubble, the same page, an external page)
  2. What data are you trying to send (one or more types)?
  3. Where are you trying to send the data to? A page within Bubble?
  4. And on the destination page, how are you displaying this data?

You can also do this on page load:

2 Likes