navigation1Add my vote for this tag create new tag
, view all tags

Tabbed Navigation Add-On

This application provides tabbed browsing capabilities to TWiki topics (inspired by TWiki:Plugins/NavBarAddOn).


To link together a set of pages with clickable tabs at the top of the page, all you need is the following code snippet, at the top of each of the linked topics, which

  • defines the list of tabs in the format TOPIC:NAME
  • includes this topic to do the rest of the magic

%CALC{$SET(tabs, MyAppHome:Home, MyAppArch:Architecture,           \
                 MyAppImpl:Implementation, MyAppDiscuss:Discuss)}%

The above code would get rendered as shown below, assuming that the user is currently viewing the MyAppArch topic:


  • The syntax is simple but strict. Please ensure that it is correct!
  • The tab associated with the current topic is automatically recognized and highlighted.
  • The topics in the tabs don't need to exist beforehand. The first person to click on the tab, gets to create it (same as TWiki links, but without the "non-existing topic" icon). Don't forget to add the tab definitions to the page!
  • The tabs look best at the top of the page, but you can place them wherever you want.
  • Most of the magic is done by SpreadSheetPlugin along with some nifty CSS code borrowed from this site.

Reusing tabs in multiple pages

Rather than defining the tabs in each linked topic, it is recommended to create a new topic that defines the tabs and then include this topic into all the topics where the tabs need to be displayed. This improves maintainability and makes it easy to add, delete, rename & reorder tabs. It is also possible to create a generic tab definition template (for instance, one that does not hard-code MyApp in the example above).

To continue with the example shown above, here's what would go into the tab definition topic, say GenericAppTabs:

%CALC{$SET(tabs, %APPNAME%Home:%APPNAME% Home,           \
                 %APPNAME%Arch:%APPNAME% Architecture,   \
                 %APPNAME%Impl:%APPNAME% Implementation, \
                 %APPNAME%Discuss:%APPNAME% Discuss)     \
      $SET(split, 2)                                     \
      $SET(editlink, %TOPIC%)}%

Let's assume that we want to add the tabs to a set of topics related to CoolApp, namely CoolAppHome, CoolAppArch, CoolAppImpl and CoolAppDiscuss, we would add the following lines to the top of each of these topics:

%INCLUDE{"GenericAppTabs" APPNAME="CoolApp"}%

Here's what we did.

  • Define a tab template, using a variable called APPNAME.
    • The editlink line tells the utility to add a Pencil button right before the Help button, pointing to the tab definition page, i.e. GenericAppTabs.
    • The split line tells the utility to split the tabs into two rows, with 2 in the top row and the rest in the second row. Normally, if there are too many tabs or if the tab names are long they will wrap around into multiple lines as needed. This just lets you control how the tabs are split.
  • In the topics where we want the tabs, we define the APPNAME variable in the %INCLUDE%.

Here's what it would look like:


  • Yes, I know that the tabs are a little bit "in your face", but I'm no graphics expert. Feel free to tweak the images attached to this topic. You need to fix bg.gif, left.gif, right.gif, left_on.gif and right_on.gif.

Add-On Installation Instructions

Note: You do not need to install anything on the browser to use this add-on. The following instructions are for the administrator who installs the add-on on the server where TWiki is running.

  • Download the ZIP file from the Add-on Home (see below)
  • Unzip TabbedNavigationAddOn.zip in your twiki installation directory. Content:
    File: Description:
    data/TWiki/TabbedNavigationAddon.txt Add-on topic
    data/TWiki/TabbedNavigationAddon.txt,v Add-on topic repository
    data/TWiki/TabbedNavigationInclude.txt Add-on include topic
    data/TWiki/TabbedNavigationInclude.txt,v Add-on include topic repository
    pub/TWiki/TabbedNavigationAddon/bg.gif Tab background image
    pub/TWiki/TabbedNavigationAddon/left.gif Tab left image
    pub/TWiki/TabbedNavigationAddon/right.gif Tab right image
    pub/TWiki/TabbedNavigationAddon/left_on.gif Tab left active image
    pub/TWiki/TabbedNavigationAddon/right_on.gif Tab right active image
    pub/TWiki/TabbedNavigationAddon/screen1.png Example 1
    pub/TWiki/TabbedNavigationAddon/screen2.png Example 2
  • Test if the installation was successful:
    • I have ibnstalled this on my 4.1.2. It works fine. I have put this text on two pages (TabbedNavigationPage and CommentsOnTabbedNavigationExample)

%CALC{$SET(tabs, TabbedNavigationPage:Topic, CommentsOnTabbedNavigationExample:Comments)}%

with good results.

Known issues

The addon does not work well if one topic name is a complete subset of the others (e.g: TestTopic1 and TestTopic1Comments).

Add-On Info

  • Set SHORTDESCRIPTION = Add tabbed navigation bars to TWiki topics

Add-on Author: TWiki:Main.PankajPant
Copyright: © 2006, TWiki:Main.PankajPant
License: GPL (GNU General Public License)
Add-on Version: 30 May 2007 (V1.000)
Change History:  
30 May 2007: Initial version
TWiki Dependency: $TWiki::Plugins::VERSION 1.1 (TWiki 4.0)
CPAN Dependencies: none
Other Dependencies: none
Perl Version: 5.005
Add-on Home: http://TWiki.org/cgi-bin/view/Plugins/TabbedNavigationAddOn
Feedback: http://TWiki.org/cgi-bin/view/Plugins/TabbedNavigationAddOnDev
Appraisal: http://TWiki.org/cgi-bin/view/Plugins/TabbedNavigationAddOnAppraisal

Related Topic: TWikiAddOns, TWiki:Plugins/NavBarAddOn.

-- TWiki:Main.PankajPant - 30 May 2007

Topic attachments
I Attachment History Action Size Date Who Comment
Compressed Zip archivezip TabbedNavigationAddOn.zip r1 manage 17.7 K 2008-07-05 - 00:53 OliverKrueger Addon Zip
Edit | Attach | Watch | Print version | History: r5 < r4 < r3 < r2 < r1 | Backlinks | Raw View | Raw edit | More topic actions
Topic revision: r5 - 2008-07-05 - OliverKrueger
  • Learn about TWiki  
  • Download TWiki
This site is powered by the TWiki collaboration platform Powered by Perl Hosted by OICcam.com Ideas, requests, problems regarding TWiki? Send feedback. Ask community in the support forum.
Copyright © 1999-2018 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.