Language selection

Government of Canada / Gouvernement du Canada

Health Infobase Design Manual

  Table of contents

Table of contents


Table of contents

Tabbed interface

Tabbed interfaces allow splitting a complex data product in multiple sections.

On this page

When to use

  • Use a tabbed interface to separate different aspects of a data product

What to avoid

  • Use a maximum of 3 to 6 tabs
  • Only use a tabbed interface if you have too much content to make everything fit in one page

Design and code

Page 1: Group name

Short introduction to the data product (optional). 1 or 2 sentences explaining the product.

HTML 
<section class="blue-header well well-sm brdr-0 mrgn-bttm-0 mrgn-tp-0">
  <div class="container mrgn-tp-sm">
    <h1 class="mrgn-tp-md" property="name" id="wb-cont" dir="ltr">
      <span class="stacked">
        <span>Page 1</span>: <span>Group name</span>
      </span>
    </h1>
    <ul class="list-inline small mrgn-bttm-sm" style="line-height:1.65em" id="list-inline-desktop-only">
      <li class="mrgn-rght-lg"> Last updated: 2023-01-01</li>
      <li>
        <a class="pdf" href="#">
          <i class="fa fa-download" aria-hidden="true"></i>
          <span class="wb-invisible">Download page in  </span>PDF <span class="wb-invisible"></span>
        </a>
      </li>
      <li>
        <a class="pdf" href="#">
          <i class="fa fa-download" aria-hidden="true"></i>
          <span class="wb-invisible">Download data in  </span>CSV <span class="wb-invisible"></span>
        </a>
      </li>
    </ul>
    <p>Short introduction to the data product (optional). 1 or 2 sentences explaining the product.</p>
  </div>
</section>
<section class="well well-sm brdr-0 mrgn-bttm-25 mrgn-tp-0 tabNav" style="padding:0px;">
  <div class="container">
    <nav>
      <ul class="list-inline hidden-xs hidden-sm mrgn-bttm-0">
        <li>
          <a class="active btn btn-tabs" id="active-tab" role="button" href="#">Page 1</a>
        </li>
        <li>
          <a class="btn btn-tabs" id="tab" role="button" href="./template_tabs_2_EN">Page 2</a>
        </li>
        <li>
          <a class="btn btn-tabs" id="tab" role="button" href="./template_tabs_3_EN">Page 3</a>
        </li>
        <li>
            <a class="btn btn-tabs" id="tab" role="button" href="./template_tabs_4_EN">Page 4</a>
        </li>
        <li>
          <a class="btn btn-tabs" id="tab" role="button" href="./template_tabs_5_EN">Page 5</a>
        </li>
      </ul>
      <ul class="list-unstyled hidden-md hidden-lg">
        <li>
          <a class="active btn btn-tabs-mobile" style="padding:10px 0px;" id="active-tab" role="button" href="#">Page 1</a>
        </li>
        <li>
          <a class="btn btn-tabs-mobile" id="tab" role="button" href="./template_tabs_2_EN">Page 2</a>
        </li>
        <li>
          <a class="btn btn-tabs-mobile" id="tab" role="button" href="./template_tabs_3_EN">Page 3</a>
        </li>
        <li>
          <a class="btn btn-tabs-mobile" id="tab" role="button" href="./template_tabs_4_EN">Page 4</a>
        </li>
        <li>
          <a class="btn btn-tabs-mobile" id="tab" role="button" href="./template_tabs_5_EN">Page 5</a>
        </li>
      </ul>
    </nav>
  </div>
</section>
CSS 
.tabNav a:visited {
color: #2b4380;
}
.tabNav a:visited:hover {
color: #fff;
}

.btn-tabs {
background-color: #F5F5F5;
color: #2b4380;
font-size: 20px;
font-weight: bold;
border-radius: 0px;
}
        
.btn-tabs:hover {
background-color:#26374A;
color: #FFF;
}
 
.btn-tabs.active {
background-color: #26374A;
color: #FFF;
font-size: 20px;
font-weight: bold;
box-shadow: none;
border-radius: 0px;
}
        
  
.btn-tabs-mobile {
background-color: #F5F5F5;
color: #2b4380;
font-size: 20px;
font-weight: bold;
border-radius: 0px;
padding:10px 0px
}
        
  
.btn-tabs-mobile.active {
background-color: #F5F5F5;
color: #26374A;
font-size: 20px;
font-weight: bold;
box-shadow: none;
border-radius: 0px;
border-bottom: 5px solid #26374A;
}
    
.btn-tabs, .btn-tabs:visited {
display: inline-block;
text-decoration: none;
}

Content and design guidelines

  • Don’t label a tab “Overview” or “About [topic]” - use meaningful and descriptive tab labels instead
  • Follow the general design guidelines

Accessibility guidelines

Date modified: