A Sustainable Axure Tab Control

The Axure tutorials are a great resource, both for learners starting out with interactive prototyping and old hands in need of reference material during bouts of amnesia. But the approach suggested for constructing a tab control, whilst being a quick method, hinders subsequent maintenance and enhancement. Here, I propose a revised approach which is cleaner, lighter, and exploits Axure’s latent power. And I follow it up with a detailed tutorial.

First, a definition

In this article I define a tab control as a set of tabs – a tab being a combination of one tab button and one tab pane:

The problem

The Axure tutorial suggests placing each tab onto a different state of a dynamic panel. This means placing all tab buttons on every state, altering their appearance according to whichever tab is visible. Having to update many existing prototypes where this method had been used – editing the label on each instance of a tab button, or adding a new tab button many times, or moving sets of tabs – quickly grew tiresome.

The solution

I needed an approach that meant that an update to a prototype would result in precisely one change, rather than one change for each tab. The solution is to keep the tab buttons separate from the tab panes. By adding buttons to a selection group and tweaking their Selected states this is possible. And that’s it, in a nutshell. But read on for a step-by-step guide.

The tutorial

This is what we’re going to make:

For the tab buttons:

  1. Create a single tab button like so:
    1. In Axure, add a rectangle. Optionally, set its shape to Rounded Top.
    2. Set its Fill Color to transparent.
    3. Edit its Selected Style, setting this Fill Color to white.
  2. Copy the button, paste it twice, and line them all up.
  3. Assign a selection group (select all three and use the context menu). This configures the buttons to be treated as mutually exclusive so that when one is in its selected state, the others won’t be.
  4. Name your buttons (Label in the Widget Properties pane), e.g. btn1, btn2, btn3.
  5. Label your buttons (double-click each rectangle), e.g. State 1, State 2, State 3.

For the tab panes:

  1. Add a dynamic panel, name it pnlTabPages and check its dimensions.
  2. Open the default state of the dynamic panel and add a rectangle at position (0, 0) with the dimensions noted previously.
  3. Select the rectangle and copy it.
  4. Add two more states to the dynamic panel, pasting the copied rectangle into each one.
  5. Name your dynamic panel’s states, e.g. pane1, pane2, pane3.
  6. Label your panes (double-click each rectangle), e.g. State 1, State 2, State 3.

Wiring it up:

  1. Position the dynamic panel so that it’s 1px above the bottom of the buttons and, with it still selected, choose Send to Back from the context menu. Doing this ensures that when a tab button is in its Selected state (with a white fill) it appears conjoined to the currently visible tab pane.
  2. Edit the OnClick event handler of btn1 as follows:
    • Set btn1 to its Selected state
    • Set the dynamic panel to pane1
  3. Do the equivalent for btn2 and btn3. (Since our buttons are in a selection group, it’s not necessary to deselect them explicitly.)

  1. Finally, to ensure that a tab is initially selected, set btn1 to its Selected state in the OnPageLoad event (under Page Interactions).

And that’s all there is to it.

Want to change btn2’s label? Do it once, not thrice!
Want to move btn3 to the left of btn1? Do it once, not thrice!
Want to add a new tab? Add a state to the dynamic panel and one new button – not three!

Comments or feedback? Let’s have it…

10 thoughts on “A Sustainable Axure Tab Control

  1. I’ve been creating tabs this way since Axure added selection groups to its toolset and totally support this approach. It’s great that you took the time to explain the process because it really slims down your Axure file and makes you less dependent on complex dynamic panels.

    Nice job, Stuart!

  2. Thank you for skipping the part that the name of the selection group is suggested
    and thank you for this tutorial! 🙂

  3. I’m using it too! Moreover, little tip: if my panes are the different pages. I make list of tabs like masters. Inside this master I create thouse actions «on page load» for the selected tab state (axure 6.5). The key is to set «selected» state for the current page of prototype. In my projects I apply names to the pages with numeric mark. For ex.:
    1. Products
    1.1. Product desc
    1.2. Photos
    1.2.1. Upload photo
    2. FeedBack
    2.1. Faq
    It’s easy to communicate with my clients like this. They can say «page 2.1 is working wrong» instead of «something wrong on the Faq page». Sooo… back to the tabs states (or global menu). «On page load» in the master I’m setting rules for the tabs:
    Case: “Product page” (if “[[PageName]]” contains “1.”)
    Set “TabItm1” to selected
    Case: “FeedBack” (if “[[PageName]]” contains “2.”)
    Set “TabItm2” to selected
    That’s it! With this approach «TabItm1» will be selected not only for the «Products» page itself but for the whole brunch! Hope this will be useful for someone 🙂
    I’m from Russia and sorry if my speach wasn’t clear enough…

  4. Great approach Stuart…My only question, in the panes…I’ve added links and onclick actions for those links. Seems easy enough, but when I run the prototype, the links are there, but seem not to work. Insight?


  5. Victor, thanks for the tip-off! I have now bowdlerised myself 🙂
    Roman, thanks for the tip!
    Thomas, if you can make your RP file available I can have a look.

  6. Thomas, the problem is your rounded rectangle that provides a border for the breadcrumb trail and tabs: it’s on top of those elements (think z-order, if that helps). Simply select the rounded rectangle, open the context menu (right click) and choose Order > Send to Back.

  7. Knew it had to be something terribly small…Thank you Stuart. You’ve saved me hours of rework and made a very lightweight .rp 🙂