Creating Tabs with Axure RP 5

Axure RP is one of the best tools there is for quick prototyping. With Axure you can easily wireframe all your concept pages and with a click of a button allow the application to generate a requirements document for you, how sweet is that?!

Unfortunately, one key component for any page nowadays is the use of Tabs, which is not a Widget that can easily be dragged and drop on today’s version of Axure.

Here is a simple way to create the popular tab behavior, which unfortunately, is nowhere to be found when you search the Axure site.

1. Drag a Dynamic Panel from the Widgets panel.

2. Right-click the dynamic panel and select Edit Dynamic Panel > Manage Panel States

3. Add as many States as tabs you’ll need.

4. Select State1 and click Edit State

The trick here is to use the same elements in each state and use the buttons for decoration instead of functionality. In other words, in order to get the look and feel of tabs, each State has to have the same content, except for the body of the tag itself, of course.

This approach will allow you to customize the look and feel of each button on each State thus you simulate the tab been selected and changing color.

In order to wrap this up, you simply need to add an Image Map widget to the top of the Dynamic Panel so you can create the click events (i.e. Image Map1 > State1, Image Map2 > State2, etc etc etc)

That’s all! now, wasn’t that easy?