HELP! Horizontally scrollable tab bar with loop?


#1

Hello Forum,

it is possible to create a horizontally scrollable tab bar for a smartphone in Axure? The menu items should not have start and end points but should loop. The selected menu item is in the middle and the text should appear below it. I look forward to your answers and thank you in advance. Here are some pictures for better understanding.


#2

Yes, you could do this with a Dynamic Panel, set to loop through its states. I think you can use animations to transition between different dynamic panel states, but you might not be able to do as detailed animations as your visual implies.


#3

Thanks for your quick answer :slight_smile: Could you please explain to me how to create the loop? I’ve only recently become familiar with the program


#4

Actually if you’re allowing users to tap on any item in the menu (rather than going through the items sequentially) then you don’t need to loop.

You would create your navigation bar with your default ‘home’ item in the centre, then create empty states for each of the other items in the nav bar. I would then add a click/tap interaction to each item that sets the dynamic panel to the appropriate state. Then I would copy your first nav bar into each of the dynamic panel states and move the buttons around/restyle everything. Then the user should be able to tap each icon and have it activate the correct state.

If you’re new to Axure, the official documentation is quite sparse on detail because there are so many potential uses for each piece of functionality. This video series is an excellent primer on the common components and the different ways they can be used.


#5

Something kinda like this? This is quick and dirty, but it’s an idea. (Use your right arrow key to trigger)

HorizontalScroll_Faking_It.rp (135.4 KB)