Tabbed Navigation

Implementing tabbed navigation within a page is a fairly straightforward task, but it does require some HTML coding.

  1.  In the body area, switch to source view:

     
  2. Next, create the shell for your tabbed content box:
    <div class="tabbox">
        <ul class="nav">
       </ul>
       <div class="content clearfix">
       </div>
    </div>
     
  3. For each tab you want to have, create a navigation item and tab container in the content box. The tabs should contain a link with the href="#", as JavaScript will handle the tab switching. Note: the navigation tabs and tab content areas should be in the same order, meaning the first tab corresponds to the first content block, the second to the second, and so on. You can't have the first tab activate the third content area.
    <div class="tabbox">
       <ul class="nav">
           <li id="tab_tab1name"><a href="#tab1name">Tab 1</a></li>
           <li id="tab_tab2name"><a href="#tab2name">Tab 2</a></li>
           <li id="tab_tab3name"><a href="#tab3name">Tab 3</a></li>
       </ul>
       <div class="content">
           <div class="tab">Tab 1 content here</div>
           <div class="tab">Tab 2 content here</div>
           <div class="tab">Tab 3 content here</div>
       </div>
    </div>
     
  4. Finally, set the tab you wish to have as default to be the active tab by adding the active class to both the list item element as well as the actual tab content area:
    <div class="tabbox">
        <ul class="nav">
           <li id="tab_tab1name" class="active"><a href="#tab1name">Tab 1</a></li>
           <li id="tab_tab2name"><a href="#tab2name">Tab 2</a></li>
           <li id="tab_tab3name"><a href="#tab3name">Tab 3</a></li>
       </ul>
       <div class="content">
           <div class="tab active">Tab 1 content here</div>
           <div class="tab">Tab 2 content here</div>
           <div class="tab">Tab 3 content here</div>
       </div>
    </div>
     

Example Tab box:

Tab 1 content here
Tab 2 content here
Tab 3 content here

 

Linking directly to a tab

Once you have your tabs created, you can link directly to a tab by using an "anchor". For example: If you have a page living at /about, and on the about page you have 3 tabs with the ids "tab_faculty", "tab_staff", "tab_student", you could link directly to the staff tab by linking to /about#staff. Important: your tabs MUST have an id of "tab_somename" or they will not be linkable.

On the current page we have three tabs defined, ids of "tab_tab1name", "tab_tab2name", and "tab_tab3name". In order for the linking to work the ids need to be prefixed with tab_ otherwise the tab won't be found.  I could link to each of them directly as follows (notice that the tab_ prefix is left out of the link):

  • /tabbed-navigation#tab1name
  • /tabbed-navigation#tab2name
  • /tabbed-navigation#tab3name

 

Linking to a tab from a tab

In order to link to another tab from inside of a tab you need to create a link. There are 2 ways this can be done.

  • The first way is to reference the hash name in the href attribute
    <a href="#tab_tab1name">link name</a>
  • The second way is to link to the page and append the hash name to the link. Note this does not include the prefixed tab_ in the name. similar to the above section linking directly to a tab.
    <a href="/tabbed-navigation#tab1name">link name</a>

 

Example Tab box containing links:

Tab 1 content here
Tab 2 content here
Tab 3 content here

 

Example Tab box with rounded tabs:

If you want the tabs across the top of the box to have rounded corners, add the tabbox-rounded class to your markup.

<div class="tabbox tabbox-rounded">
    <ul class="nav">
    	<li class="active" id="tab_tab1name"><a href="#tab1name">Tab 1</a></li>
    	<li id="tab_tab2name"><a href="#tab2name">Tab 2</a></li>
    	<li id="tab_tab3name"><a href="#tab3name">Tab 3</a></li>
    </ul>
    <div class="content">
        <div class="tab active">Tab 1 content here</div>
        <div class="tab">Tab 2 content here</div>
        <div class="tab">Tab 3 content here</div>
    </div>
</div>

The code above produces this box:

Tab 1 content here
Tab 2 content here
Tab 3 content here

 


Training Calendar
CMS Help

If you are experiencing a critical issue with your live website, please contact the IT Customer Service Center at 864-8080 or itcsc@ku.edu.

For questions on CMS policy, look & feel, and all other issues, please visit our help page.

Please contact web services at 864-6415 or webservices@ku.edu for help with your site

Online help can be found under the How-To's section of this website.