Page tabs

Just like Collapsible sections, page tab is a great solution when you are dealing with long and complex contents. The main difference between them is collapsible sections are stacked vertically and page tabs are stacked horizontally.

Only use page tabs when the reader is not expected to read all contents - they may only need information from selected sections.

DO NOT use page tabs for sequential content, it may frustrate your readers.

Overview

Page tabs can be used for additional navigation, but must appear within content area of the page, not above the menu or underneath the banner.

Page tabs must be within a grid class to ensure all margins align correctly.

The heading which applies to the whole page/all tabs should appear above the tab bar. Any headings which apply to the content within the tab should appear underneath the tab bar. The use of headings is important for accessibility, but if this causes repetition you can hide the heading from display by using the scrnhide class.

Implementation

In order to create a page tab, you will use .pagetabs-nav-tint to create this specific layout.

To create tabs:

Use <ul> to implement tabs, please note you need to have at least 1 tab. Among the all tabs, using class .pagetabs-select to make 1 tab to be 'active', this will make the selected tab expanded by default.

Code structure
<div class="pagetabs-nav-tint">
                <ul>
                    <li><a>...</a></li>                    
                    <li><a class="pagetabs-select">...</a></li>                    
                        ...                      
                </ul>     //end tab list
                ...

To create tab contents:

All tab contents need to be stored in .tab-content container, and you should have corresponding number of .tab-pane containers based on the number of tab items you created in <ul>. Add class .active to the corresponding .tab-pane.

Code structure
<div class="tab-content"> 
                    <div class="tab-pane"> 
                            ...
                    </div> 
                    <div class="tab-pane active"> 
                        <h3> 2009</h3> 
                            ...
                    </div>

View complete code strcture for page tabs

The example below helps you to understand the code structure better, the 2nd tab will be opened by default, because we define pagetabs-select in the list, and we define the 2nd tab-pane to be active.

<div class="pagetabs-nav-tint">
                <ul>
                    <li><a>...</a></li>                    
                    <li><a class="pagetabs-select">...</a></li>                    
                        ...                      
                </ul>     //end tab list     
                <div class="tab-content"> 
                    <div class="tab-pane"> 
                            ...
                    </div> 
                    <div class="tab-pane active"> 
                        <h3> 2009</h3> 
                            ...
                    </div> 
                        ...  
                </div>    //end tab-content
        </div>    //end pagetabs-nav-tint

Customisation

We created 2 versions of page tabs, one is in tint and one is in black.

  • .pagetabs-nav-tint
  • .pagetabs-nav-black

2010 releases

  • A theory of information architecture, John Smyth
  • Practical applications of chaos theory, Paul Nerk

2009 releases

  • Lorem Ipsum is simply dummy text of the printing and typesetting industry. , John Smyth
  • Lorem Ipsum has been the industry's standard dummy text ever since the 1500, Paul Nerk

2008 releases

  • When an unknown printer took a galley of type and scrambled it to make a type specimen book., John Smyth
  • It has survived not only five centuries, Paul Nerk
<div class="pagetabs-nav-tint">
                <ul>
                    <li><a>2010</a></li>                    
                    <li><a class="pagetabs-select">2009</a></li>                    
                    <li><a>2008</a></li>                       
                </ul>     //end tab list     
                <div class="tab-content"> 
                    <div class="tab-pane"> 
                        <h3> 2010</h3>
                        ...
                    </div> 
                    <div class="tab-pane active"> 
                        <h3> 2009</h3> 
                        ...
                    </div> 
                    <div class="tab-pane"> 
                        <h3> 2008</h3> 
                        ...
                    </div>   
                </div>    //end tab-content
        </div>    //end pagetabs-nav-tint