Responsive Toggle Tabs

[ts11]

I’m trying to design a Nav Menu with a responsive, toggle-tabs UI, a la Facebook (see below).

I want the menu items to disappear into a “more” focus group as the page width is constrained, as in the screenshots above. That said, I’m not very adept at responsive design and, for the life of me, just don’t know where to start. Has anyone built something similar? If so, I’d be so grateful for any pointers you could offer.

[nfish]

As a starting point, settle on a fixed width button, say 80px, then create a conditional on each button that when current page width <= width in pixels, the width being a manual equation of ((80px x number of buttons) x button position) + padding) . Then below the ‘more’ button is a group focus triggered on hover where the buttons appear with the same conditional but in reverse.

[ts11]

This was a very helpful starting point. Thank you! I’ve nearly got this working. However, I’ve run into another roadblock, and I’m wondering if you might know a solution.

I’ve set hiding rules in the responsive tab to reveal/hide buttons based on the parent container width, as suggested. That works like a charm.

I then created a group focus menu fixed to the “More” button. I made the menu items hidden by default with a condition that should make them visible whenever the associated button is hidden.

This is where I run into problems.

For some reason, the menu items are not showing when they should (as shown in above video). I’m guessing that hiding rules in the responsive tab are treated differently somehow than those created in the element editor? I don’t know why this would be, but it’s the only thing I can think of.

I’m trying to think of a logical work-around, but so far firing blanks. Any ideas? Thank you again

[ts11]

After reading up on the forum about other folks’ experiences, it seems the responsive engine hiding rules CAN’T be used with conditionals. This seems very counter-intuitive to me.

@eve, has Bubble considered addressing this? It’s very confusing for the average user and not at all easy to diagnose.

For now, this leaves me in quite the pickle. In this particular use case, I need to use the responsive engine to hide the buttons, because I have to collapse their width. That said, if I can’t use the visibility of the buttons as the condition on which to show the corresponding item in my group focus menu, what can I do?

I can’t refer to the width of the parent container. The only real option, it would seem, is to use page width as a proxy. However, that’s pretty messy. I’m sure there’s a good reason for these limitations, but they sure are frustrating.

@nfish, do you have any better ideas? Thank you again.

UPDATE:

After fiddling with Dev Tools to work out the page widths at which buttons would be visible/hidden, I’ve arrived at a good working prototype. Again, not the most ideal approach. But it works and that’s the most important thing! Hope this thread might be helpful to others in the future.

To recap, my approach was as follows:

1. Create a container group within which we will nest our buttons
2. Each button is set to fixed-width, left-aligned and nested within its own flexible container group
3. In the Responsive Tab, we create hiding rules for each button. As the parent container’s width is constrained, buttons disappear
4. The final button group, labeled “More,” has a group focus menu with items for each button
5. These menu items are hidden by default. Each item has a condition that reveals it when the page width is such that the corresponding button is hidden. Again, to work out the proper widths, you’ll have to fiddle with Dev Tools, but it shouldn’t be difficult.
6. As the parent container’s width is constrained and buttons are hidden, their corresponding menu items will be revealed.

[nfish]

Hi,

OK that is weird as I just set it up and it works fine.

I know its not perfect, but take a look and let me know how you get on.

Bubble Editor - Menuscale