Group Navigation optimization

Hi im looking to handle navigation the best way posible.Im creating a web app that uses group navigation combined with page navigation.

I just recently kind of understand how to use states to navigate in a easier way than using show/hide workflows. Very helpful when you have several groups in one page.

Now i’m guessing if i can make it even more efficient

My most recent hypothesis is to use a expression like this to make navigation between groups easier to handle :
When “This page’s state is This group”
This element is visible [Check]

Right now i’m not sure if it’s posible to access a group as a dynamic element ,set it as a state type and /or use it as slidable menu´s current value . It would be awesome if we could. It would save a lot of time writing expressions.Is there a way to do that?

At this moment i’m using the following expression:

where “new_index” is the page. And “Page” is the state

If you now a better way to handle navigation let me know ,please.
@NigelG @emmanuel

Also, is it necessary to have both the expressions like that.:
When “This page’s state is x”
This element is visible [Checked]


When “This page’s state is not x”
This element is visible [Unchecked]

Or do i only need the first one?

I had the same idea a while back but found it wasn’t possible. As far as I know, you cannot have a custom state of type Element (group). You also cannot reference a group’s name dynamically as text. The only option seems to be to manually type each group’s name. It’s a little painful but once you accept it has to be done, you just get on with it. It’s still far better and much cleaner than the show/hide approach. I agree thought that this is an idea worth considering for the Bubble team.

As for your second question, I have read here on the forums that you only need to mark the group as invisible by default, then set one condition - your first one above. It makes sense too, but I must admit, in my apps, I do both conditions to be absolutely sure :slight_smile:

1 Like

Late addition to this conversation.
I don’t check for both conditions to make an element invisible or visible.
Say that I mark it as “This element is visible on page load” (handy to see always it in the editor without having to find it in the Elements Tree), I only check for the condition that would have to occur to make it invisible, and it works OK.

Hope this helps,