Best practice on building tabs as main navigation for website.

Michael Magoon shared this question 6 years ago
Answered

I am building a prototype for a website whose main navigation is a series of tabs across the top. I understand that the Dynamic Panel is useful for creating tabs, but I am not sure how best to structure the content below the tabs. Your example of tabs in the tutorial assumes that it is one panel with tabs on one screen, not really the main navigation.


My question is on the best practice to do so. I see two options.


1) Create a Dynamic Panel for the tabs and place it on the template. Then put content on separate screens.


2) Create a Dynamic Panel for the tabs and put all the content in separate panels within Dynamic Panel.


I am leaning towards #1 as the content has its own dynamic panels and I am afraid that it will get really confusing, but maybe there is something that I am not thinking of.

Comments (7)

photo
1

The third possibility is to have two dynamic panels:


- one for the Tabs and the navigation and


- one for the content


The advantage is that the logic for the tabs should only be done once and hase not to be copied to every panel with the content.

photo
1

What I usually do is to place the tabs in the template as simple labels. Then define the navigation for each of them. Finally, in each screen, I copy one of the tabs and I place it just above the one in the template. Then I set the look and feel of that tab in the screen to something that make it look like 'selected'.

photo
1

Thanks, Victor. That makes sense.


In the long run, however, given how widespread tabs are in web if there were a widget designed specifically for that purpose. If you could quickly define:


1) number of tabs


2) properties of the inactive state


3) properties of the active state


4) properties of the over state


5) the destination when they are clicked


Adobe Flash Catalyst does a nice job with the implementation of tab navigation if you want to use something as a model.

photo
1

Very ggod sugestion! This should be realized and will help a lot!

photo
1

Yes, we already have it in mind, an accordion widget will be handy too. But we would like to finish some ongoing strategic projects that we have for this year before. I can't tell which are those projects but you will have news soon. Thanks for the suggestion about taking a look at Flash Catalyst, we will take it into consideration when we do it.

photo
1

I understand.

photo
1

Thanks, I know it's hard to understand why we keep some bugs unfixed, but once we finish these two big projects we have we will focus our efforts on bug fixing and usability improvements.