Page tree
Skip to end of metadata
Go to start of metadata

Tabs on a v3 template page

<div id="tabs">

    <li><a href="#tabtitle1"><span>Tab title 1</span></a></li>
    <li><a href="#tabtitle2"><span>Tab title 2</span></a></li>

  <div id="tabtitle1">
    content of tab 1 goes here

  <div id="tabtitle2">
    content of tab 2 goes here


Set the bath.macros property to tabs

  • Right-click on the page in the cms and select Properties and then click on Advanced.
  • Scroll down to the bath.macros property field and add the word tabs.
  • Click ok

If you want Google Analytics to track clicks on each tab individually then also add tabtracking to bath.macros property after 'tabs', separated with a comma: tabs,tabtracking

There is currently an issue on IE where the page jumps when switching to a tab with less content. This is caused when the the current tab is added as a hash in the url. This has been disabled to remove this issue.

Tabs on Foundation 4 pages

The HTML to implement tabs in Foundation 4 is different. Instead of a wrapping <div> with a <ul> to make the tabs themselves and then separate <div>s to wrap the content, there's no need for the <ul> and we use <section> elements which will contain the "tab" headings and a <div> for the content.

Use the snippet below as an example:

  1. TAB LABEL is the text that will appear on the tab.
  2. HEADING is a heading that will appear inside of the exposed tabbed area and should be similar the TAB LABEL.
    1. it might be advisable to keep some tab tiltles shorter than headings - the "Government, charity and public policy" one for example.

  3. CONTENT is just the rest of the content to go within the tabbed area.

Note that these tabs will automatically switch to an accordion below the breakpoint for better viewing on mobiles.

This is implemented on

This implementation of tabs is part of a feature provided by Foundation 4. For more info see the Auto Configuration section of


<div class="section-container" data-section="auto">
    <section class="active">
        <p class="section-title" data-section-title=""><a href="#academia">TAB LABEL 1</a>
        <div class="section-content" data-slug="academia" data-section-content="">
            <h2>HEADING 1</h2>
            <p>CONTENT 1</p>
        <p class="section-title" data-section-title=""><a href="#arts">TAB LABEL 2</a>
        <div class="section-content" data-slug="arts" data-section-content="">
            <h2>HEADING 2</h2>
            <p>CONTENT 2</p>
        <p class="section-title" data-section-title=""><a href="#business">TAB LABEL 3</a>
        <div class="section-content" data-slug="business" data-section-content="">
            <h2>HEADING 3</h2>
            <p>CONTENT 3</p>