.png)
The tabs are stored on a separate page within the space and then imported in to the left sidebar...
The Basics
We create the tab effect in two key stages:
- Tab images are shown in the sidebar, linked to the relevant locations
- CSS is used to visually indicate which tab is selected
The actual implementation of this is quite verbose - so verbose that we're already thinking of ways to make it cleaner (we'll update this tutorial when we do).
We start with a block of wiki notation like the following, on the Tabs page (which also contains the tab images as page attachments):
{builder-show:title=Home}
{menulink:home|tooltip=Home|class=stab}!Tabs^tab0.gif!{menulink}
{bshow:About}{menulink:wikipage|page=About|tooltip=About}!Tabs^tab4.gif!{menulink}{bshow}
{bshow:Forum}{menulink:wikipage|page=Forum|tooltip=Forum}!Tabs^tab6.gif!{menulink}{bshow}
{menulink:news|tooltip=News}!Tabs^tab3.gif!{menulink}
{bshow:Tutorials}{menulink:wikipage|page=Tutorials|tooltip=Tutorials}!Tabs^tab7.gif!{menulink}{bshow}
{bshow:Documentation}{menulink:wikipage|page=Documentation|tooltip=Documentation}!Tabs^tab8.gif!{menulink}{bshow}
{bshow:Support}{menulink:wikipage|page=Support|tooltip=Support}!Tabs^tab1.gif!{menulink}{bshow}
{bshow:Development}{menulink:wikipage|page=Development|tooltip=Development}!Tabs^tab2.gif!{menulink}{bshow}
{menulink:index|tooltip=Navigate}!Tabs^tab5.gif!{menulink}
{style}.atb-leftslider {background-color:#cbffcf;}{style}
{builder-show}
In itself, this is fairly simple syntax - it's just a load of images with links wrapped round them. The active tag is marked by a class=stab ("selected tab") in the menulink that wraps the tab image - we'll explain why later in 4 - CSS.
The notation shown above will only be shown when you're looking at the page with title "Home" - otherwise it'll be hidden. There is a similar block of wiki notation for each of the other tabs that will show all tabs with the relevant tab selected depending on what you are looking at.
bshow macro
One of the limitations of Confluence is that you can't nest macros and this posed a problem because we wanted to use the builder-show macro within another builder-show macro.
To get round this problem we created a user macro called "bshow", set it to have a body (unprocessed) and output wiki notation. The macro template is as follows:
{builder-show:page=${param0}}${body}{builder-show}
When you then call:
{bshow:About}{menulink:wikipage|page=About|tooltip=About}!Tabs^tab4.gif!{menulink}{bshow}
The actual output is rendered as:
{builder-show:title=About}{menulink:wikipage|page=About|tooltip=About}!Tabs^tab4.gif!{menulink}{builder-show}
This effectively allows us to nest one builder-show macro within another and solves our problem.
Inline style
For the selected tab, we also use an inline style to set the background colour of the left slider bar to the same colour as the selected tab:
{style}.atb-leftslider {background-color:#cbffcf;}{style}
This is a bit hacky but it has the major benefit of giving us complete control over the tab colours on a space by space basis and also ensuring the correct slider bar colour is set only when the associated tab is selected.
The full notation
We mentioned at the start of the tutorial that the full wiki notation was somewhat verbose - here it is in full:
{builder-show:title=Home}
{menulink:home|tooltip=Home|class=stab}!Tabs^tab0.gif!{menulink}
{bshow:About}{menulink:wikipage|page=About|tooltip=About}!Tabs^tab4.gif!{menulink}{bshow}
{bshow:Forum}{menulink:wikipage|page=Forum|tooltip=Forum}!Tabs^tab6.gif!{menulink}{bshow}
{menulink:news|tooltip=News}!Tabs^tab3.gif!{menulink}
{bshow:Tutorials}{menulink:wikipage|page=Tutorials|tooltip=Tutorials}!Tabs^tab7.gif!{menulink}{bshow}
{bshow:Documentation}{menulink:wikipage|page=Documentation|tooltip=Documentation}!Tabs^tab8.gif!{menulink}{bshow}
{bshow:Support}{menulink:wikipage|page=Support|tooltip=Support}!Tabs^tab1.gif!{menulink}{bshow}
{bshow:Development}{menulink:wikipage|page=Development|tooltip=Development}!Tabs^tab2.gif!{menulink}{bshow}
{menulink:index|tooltip=Navigate}!Tabs^tab5.gif!{menulink}
{style}.atb-leftslider {background-color:#cbffcf;}{style}
{builder-show}{builder-show:title=About|recurse=true}
{menulink:home|tooltip=Home}!Tabs^tab0.gif!{menulink}
{menulink:wikipage|page=About|tooltip=About|class=stab}!Tabs^tab4.gif!{menulink}
{bshow:Forum}{menulink:wikipage|page=Forum|tooltip=Forum}!Tabs^tab6.gif!{menulink}{bshow}
{menulink:news|tooltip=News}!Tabs^tab3.gif!{menulink}
{bshow:Tutorials}{menulink:wikipage|page=Tutorials|tooltip=Tutorials}!Tabs^tab7.gif!{menulink}{bshow}
{bshow:Documentation}{menulink:wikipage|page=Documentation|tooltip=Documentation}!Tabs^tab8.gif!{menulink}{bshow}
{bshow:Support}{menulink:wikipage|page=Support|tooltip=Support}!Tabs^tab1.gif!{menulink}{bshow}
{bshow:Development}{menulink:wikipage|page=Development|tooltip=Development}!Tabs^tab2.gif!{menulink}{bshow}
{menulink:index|tooltip=Navigate}!Tabs^tab5.gif!{menulink}
{style}.atb-leftslider {background-color:#e0fef6;}{style}
{builder-show}{builder-show:title=Forum|recurse=true}
{menulink:home|tooltip=Home}!Tabs^tab0.gif!{menulink}
{bshow:About}{menulink:wikipage|page=About|tooltip=About}!Tabs^tab4.gif!{menulink}{bshow}
{menulink:wikipage|page=Forum|tooltip=Forum|class=stab}!Tabs^tab6.gif!{menulink}
{menulink:news|tooltip=News}!Tabs^tab3.gif!{menulink}
{bshow:Tutorials}{menulink:wikipage|page=Tutorials|tooltip=Tutorials}!Tabs^tab7.gif!{menulink}{bshow}
{bshow:Documentation}{menulink:wikipage|page=Documentation|tooltip=Documentation}!Tabs^tab8.gif!{menulink}{bshow}
{bshow:Support}{menulink:wikipage|page=Support|tooltip=Support}!Tabs^tab1.gif!{menulink}{bshow}
{bshow:Development}{menulink:wikipage|page=Development|tooltip=Development}!Tabs^tab2.gif!{menulink}{bshow}
{menulink:index|tooltip=Navigate}!Tabs^tab5.gif!{menulink}
{style}.atb-leftslider {background-color:#ffe4ce;}{style}
{builder-show}{builder-show:context=blogpost,space-blogposts}
{menulink:home|tooltip=Home}!Tabs^tab0.gif!{menulink}
{bshow:About}{menulink:wikipage|page=About|tooltip=About}!Tabs^tab4.gif!{menulink}{bshow}
{bshow:Forum}{menulink:wikipage|page=Forum|tooltip=Forum}!Tabs^tab6.gif!{menulink}{bshow}
{menulink:news|tooltip=News|class=stab}!Tabs^tab3.gif!{menulink}
{bshow:Tutorials}{menulink:wikipage|page=Tutorials|tooltip=Tutorials}!Tabs^tab7.gif!{menulink}{bshow}
{bshow:Documentation}{menulink:wikipage|page=Documentation|tooltip=Documentation}!Tabs^tab8.gif!{menulink}{bshow}
{bshow:Support}{menulink:wikipage|page=Support|tooltip=Support}!Tabs^tab1.gif!{menulink}{bshow}
{bshow:Development}{menulink:wikipage|page=Development|tooltip=Development}!Tabs^tab2.gif!{menulink}{bshow}
{menulink:index|tooltip=Navigate}!Tabs^tab5.gif!{menulink}
{style}.atb-leftslider {background-color:#ffcbcb;}{style}
{builder-show}{builder-show:title=Tutorials|recurse=true}
{menulink:home|tooltip=Home}!Tabs^tab0.gif!{menulink}
{bshow:About}{menulink:wikipage|page=About|tooltip=About}!Tabs^tab4.gif!{menulink}{bshow}
{bshow:Forum}{menulink:wikipage|page=Forum|tooltip=Forum}!Tabs^tab6.gif!{menulink}{bshow}
{menulink:news|tooltip=News}!Tabs^tab3.gif!{menulink}
{menulink:wikipage|page=Tutorials|tooltip=Tutorials|class=stab}!Tabs^tab7.gif!{menulink}
{bshow:Documentation}{menulink:wikipage|page=Documentation|tooltip=Documentation}!Tabs^tab8.gif!{menulink}{bshow}
{bshow:Support}{menulink:wikipage|page=Support|tooltip=Support}!Tabs^tab1.gif!{menulink}{bshow}
{bshow:Development}{menulink:wikipage|page=Development|tooltip=Development}!Tabs^tab2.gif!{menulink}{bshow}
{menulink:index|tooltip=Navigate}!Tabs^tab5.gif!{menulink}
{style}.atb-leftslider {background-color:#e4ffcb;}{style}
{builder-show}{builder-show:title=Documentation|recurse=true}
{menulink:home|tooltip=Home}!Tabs^tab0.gif!{menulink}
{bshow:About}{menulink:wikipage|page=About|tooltip=About}!Tabs^tab4.gif!{menulink}{bshow}
{bshow:Forum}{menulink:wikipage|page=Forum|tooltip=Forum}!Tabs^tab6.gif!{menulink}{bshow}
{menulink:news|tooltip=News}!Tabs^tab3.gif!{menulink}
{bshow:Tutorials}{menulink:wikipage|page=Tutorials|tooltip=Tutorials}!Tabs^tab7.gif!{menulink}{bshow}
{menulink:wikipage|page=Documentation|tooltip=Documentation|class=stab}!Tabs^tab8.gif!{menulink}
{bshow:Support}{menulink:wikipage|page=Support|tooltip=Support}!Tabs^tab1.gif!{menulink}{bshow}
{bshow:Development}{menulink:wikipage|page=Development|tooltip=Development}!Tabs^tab2.gif!{menulink}{bshow}
{menulink:index|tooltip=Navigate}!Tabs^tab5.gif!{menulink}
{style}.atb-leftslider {background-color:#cbe6ff;}{style}
{builder-show}{builder-show:title=Support|recurse=true}
{menulink:home|tooltip=Home}!Tabs^tab0.gif!{menulink}
{bshow:About}{menulink:wikipage|page=About|tooltip=About}!Tabs^tab4.gif!{menulink}{bshow}
{bshow:Forum}{menulink:wikipage|page=Forum|tooltip=Forum}!Tabs^tab6.gif!{menulink}{bshow}
{menulink:news|tooltip=News}!Tabs^tab3.gif!{menulink}
{bshow:Tutorials}{menulink:wikipage|page=Tutorials|tooltip=Tutorials}!Tabs^tab7.gif!{menulink}{bshow}
{bshow:Documentation}{menulink:wikipage|page=Documentation|tooltip=Documentation}!Tabs^tab8.gif!{menulink}{bshow}
{menulink:wikipage|page=Support|tooltip=Support|class=stab}!Tabs^tab1.gif!{menulink}
{bshow:Development}{menulink:wikipage|page=Development|tooltip=Development}!Tabs^tab2.gif!{menulink}{bshow}
{menulink:index|tooltip=Navigate}!Tabs^tab5.gif!{menulink}
{style}.atb-leftslider {background-color:#fffed1;}{style}
{builder-show}{builder-show:title=Development|recurse=true}
{menulink:home|tooltip=Home}!Tabs^tab0.gif!{menulink}
{bshow:About}{menulink:wikipage|page=About|tooltip=About}!Tabs^tab4.gif!{menulink}{bshow}
{bshow:Forum}{menulink:wikipage|page=Forum|tooltip=Forum}!Tabs^tab6.gif!{menulink}{bshow}
{menulink:news|tooltip=News}!Tabs^tab3.gif!{menulink}
{bshow:Tutorials}{menulink:wikipage|page=Tutorials|tooltip=Tutorials}!Tabs^tab7.gif!{menulink}{bshow}
{bshow:Documentation}{menulink:wikipage|page=Documentation|tooltip=Documentation}!Tabs^tab8.gif!{menulink}{bshow}
{bshow:Support}{menulink:wikipage|page=Support|tooltip=Support}!Tabs^tab1.gif!{menulink}{bshow}
{menulink:wikipage|page=Development|tooltip=Development|class=stab}!Tabs^tab2.gif!{menulink}
{menulink:index|tooltip=Navigate}!Tabs^tab5.gif!{menulink}
{style}.atb-leftslider {background-color:#d3caff;}{style}
{builder-show}{builder-show:context=space-pages}
{menulink:home|tooltip=Home}!Tabs^tab0.gif!{menulink}
{bshow:About}{menulink:wikipage|page=About|tooltip=About}!Tabs^tab4.gif!{menulink}{bshow}
{bshow:Forum}{menulink:wikipage|page=Forum|tooltip=Forum}!Tabs^tab6.gif!{menulink}{bshow}
{menulink:news|tooltip=News}!Tabs^tab3.gif!{menulink}
{bshow:Tutorials}{menulink:wikipage|page=Tutorials|tooltip=Tutorials}!Tabs^tab7.gif!{menulink}{bshow}
{bshow:Documentation}{menulink:wikipage|page=Documentation|tooltip=Documentation}!Tabs^tab8.gif!{menulink}{bshow}
{bshow:Support}{menulink:wikipage|page=Support|tooltip=Support}!Tabs^tab1.gif!{menulink}{bshow}
{bshow:Development}{menulink:wikipage|page=Development|tooltip=Development}!Tabs^tab2.gif!{menulink}{bshow}
{menulink:index|tooltip=Navigate|class=stab}!Tabs^tab5.gif!{menulink}
{style}.atb-leftslider {background-color:#ffcdfe;}{style}
{builder-show}
It's a bit nasty - lots of duplication, but luckily fairly low processing overhead as only one chunk at most will be rendered by the server depending on your location within the space.
You'll also notice that if you are in an area not covered by the tabs, no tabs will appear - we could have added another block of notation which had no selected tab, however we decided not to because we were in a rush!
Next page: 4 - CSS
Comments (11)
Mar 10, 2008
Gina Trenkamp says:
I really like the navigation on the side and I was able to duplicate for our WIK...I really like the navigation on the side and I was able to duplicate for our WIKI, my problem is that the menu keeps repeating...
twice for each page... I have 5 tabs.. home, helpdesk, documentation, forms and company..
Do I need to do a builder-hide or something to keep the menu from repeating?
Mar 10, 2008
Guy Fraser says:
Yes, the builder-hide and builder-show macros determine when the tabs are shown....Yes, the builder-hide and builder-show macros determine when the tabs are shown.
When we were developing the markup above, we had a few similar issues and added some text in to each block of tabs so we could work out which sets of tabs were being shown incorrectly when more than one set was displayed. We then worked out what settings were needed for the builder-show/hide macros to remove the unwanted sets.
Mar 10, 2008
Gina Trenkamp says:
Could you help with the markup if I paste it here? The only page the renders cor...Could you help with the markup if I paste it here? The only page the renders correctly is the HelpDesk page ?? otherwise I get duplicate tabs.
{builder-show:title=Home} {menulink:home|tooltip=Home|class=stab}!Tabs^tab_home.gif!{menulink} {bshow:HelpDesk}{menulink:wikipage|page=HelpDesk|tooltip=HelpDesk}!Tabs^tab_helpdesk.gif!{menulink}{bshow} {bshow:Documents}{menulink:wikipage|page=Documents|tooltip=Documents}!Tabs^tab_doc.gif!{menulink}{bshow} {bshow:Forms}{menulink:wikipage|page=Forms|tooltip=Forms}!Tabs^tab_forms.gif!{menulink}{bshow} {bshow:Company}{menulink:wikipage|page=Company|tooltip=Company}!Tabs^tab_company.gif!{menulink}{bshow} {style}.atb-leftslider {background-color:#ffffff;}{style} {builder-show} {builder-show}{builder-show:title=HelpDesk|recurse=true} {menulink:home|tooltip=Home}!Tabs^tab_home.gif!{menulink} {menulink:wikipage|page=HelpDesk|tooltip=HelpDesk|class=stab}!Tabs^tab_helpdesk.gif!{menulink} {bshow:Documents}{menulink:wikipage|page=Documents|tooltip=Documents}!Tabs^tab_doc.gif!{menulink}{bshow} {bshow:Forms}{menulink:wikipage|page=Forms|tooltip=Forms}!Tabs^tab_forms.gif!{menulink}{bshow} {bshow:Company}{menulink:wikipage|page=Company|tooltip=Company}!Tabs^tab_company.gif!{menulink}{bshow} {style}.atb-leftslider {background-color:#ffffff;}{style} {builder-show}{builder-show:title=Documents|recurse=true} {menulink:home|tooltip=Home}!Tabs^tab_home.gif!{menulink} {bshow:HelpDesk}{menulink:wikipage|page=HelpDesk|tooltip=HelpDesk}!Tabs^tab_helpdesk.gif!{menulink}{bshow} {menulink:wikipage|page=Documents|tooltip=Documents|class=stab}!Tabs^tab_doc.gif!{menulink} {bshow:Forms}{menulink:wikipage|page=Forms|tooltip=Forms}!Tabs^tab_forms.gif!{menulink}{bshow} {bshow:Company}{menulink:wikipage|page=Company|tooltip=Company}!Tabs^tab_company.gif!{menulink}{bshow} {style}.atb-leftslider {background-color:#fffff;}{style} {builder-show}{builder-show:title=Forms|recurse=true} {menulink:home|tooltip=Home}!Tabs^tab_home.gif!{menulink} {bshow:HelpDesk}{menulink:wikipage|page=HelpDesk|tooltip=HelpDesk}!Tabs^tab_helpdesk.gif!{menulink}{bshow} {bshow:Documents}{menulink:wikipage|page=Documents|tooltip=Documents}!Tabs^tab_doc.gif!{menulink}{bshow} {menulink:wikipage|page=Forms|tooltip=Forms|class=stab}!Tabs^tab_forms.gif!{menulink} {bshow:Documentation}{menulink:wikipage|page=Documentation|tooltip=Documentation}!Tabs^tab8.gif!{menulink}{bshow} {style}.atb-leftslider {background-color:#ffffff;}{style} {builder-show}{builder-show:title=Company|recurse=true} {menulink:home|tooltip=Home}!Tabs^tab_home.gif!{menulink} {bshow:HelpDesk}{menulink:wikipage|page=HelpDesk|tooltip=HelpDesk}!Tabs^tab_helpdesk.gif!{menulink}{bshow} {bshow:Documents}{menulink:wikipage|page=Documents|tooltip=Documents}!Tabs^tab_doc.gif!{menulink}{bshow} {bshow:Forms}{menulink:wikipage|page=Forms|tooltip=Forms}!Tabs^tab_forms.gif!{menulink}{bshow} {menulink:wikipage|page=Company|tooltip=Company|class=stab}!Tabs^tab_company.gif!{menulink} {style}.atb-leftslider {background-color:#ffffff;}{style} {builder-show}Mar 10, 2008
Guy Fraser says:
This looks like the error: {builder-show} {builder-show}{builder-show:tit...This looks like the error:
{builder-show} {builder-show}{builder-show:title=HelpDesk|recurse=true}You're closing the builder-show macro after the first block of tabs, then closing it again before opening it on the second block of tabs.
Should be:
{builder-show}{builder-show:title=HelpDesk|recurse=true}Jul 30, 2008
Denise Van says:
Is there anyway to turn this vertical tabbing into horizontal tabbing?Is there anyway to turn this vertical tabbing into horizontal tabbing?
Mar 24, 2009
Martin Misseyer says:
Hi, I've added everything, except for the: {style}.atb-leftslider {background...Hi,
I've added everything, except for the:
{style}.atb-leftslider {background-color:#cbffcf;}{style}Where do i put the code?
Greetings, Martin
Apr 03, 2009
Nicholas Bignell says:
I can't get the menulink:wikipage notation to work. (I've replaced the curly bra...I can't get the menulink:wikipage notation to work. (I've replaced the curly brackets with square brackets and the pipe character with % to enable the text to be printed).
If I enter
([bshow:About][menulink:wikipage\%page=About\%tooltip=About]!Tabs^tab4.gif![menulink] etc) I get just get the literal text appearing on the screen. I have created a space called About, so this shouldn't be an issue. The only menulinks that work are the ones which don't have wikipage, e.g 
([menulink:news\%tooltip=News]!Tabs^tab3.gif![menulink])
Jul 29, 2009
Gabriel Kwok says:
I haven't gotten very deep in the site but I can't find a page which demos the l...I haven't gotten very deep in the site but I can't find a page which demos the left tab.
Can you show me a link where I can see it?
Jul 29, 2009
Guy Fraser says:
click hereJul 29, 2009
Alain Moran says:
Bah, you beat me to itBah, you beat me to it
Jul 29, 2009
Alain Moran says:
This tutorial refers to the v2 layout, which you can experience here.This tutorial refers to the v2 layout, which you can experience here.