Tabs
Tabs are a way of splitting a page into 2-5 logical chunks of data to display. Each of these chunks can be given a short, single word title. They are not a suitable design pattern where more than 4 items need to be displayed, and it is highly recommended that you use only 3 tabs with titles of 10 characters or less.
Tabs should each contain a substantive amount of information (more than a paragraph or equivalent non-text content) and not be used to display a single link (eg. Click a tab only to find "click here to do this One Thing"). Conversely if you find that a tab is super long, or contains a large amount of bandwidth-heavy content, do not use the tab component as this will cause the user to download a large amount of content which might not be used. Instead, consider splitting this content out into a separate page that can be purposefully opened if it is desired.
For use on a homepage
Tabs should not be confused with your site navigation when used on a homepage, as it is likely that you will have a larger IA than can be communicated via 2-5 tabs. Instead, tabs are appropriate if you would like to showcase the most important content on your website to users and lead them deeper into your site structure to learn more.
It is important to note that not every page on your website needs to be accessible from either your homepage or local navigation, indeed trying to make either your local navigation or tabs reflect your IA in its entirety is a poor design decision as it will likely confuse your user by giving them too much to think about before they can make an initial click decision.
Full-width navigation tabs
Alternate tab colour
You can change the highlighed tab colour by using the class navy.
Alternate background colour
You can change the background colour by using the class black.
Set default tab
The example below has the second tab set as the default rather than the first. To do this, add the data-current="" attribute to the desired a tag.
Jump to another tab
You can use a button to jump to different tabs.
Icon
You can use icons in the tab.
External links
Using a normal link instead of a #hash value will load that page instead of any tabbed content.
Sidebar tabs
Sidebar tabs are another form of navigational tabs for use with the sidebar layout. For practical examples, have a look at the search layout and course layout.
By default, sidebar tabs are designed to scroll the page up to a full-width tabs component (above). If one does not exist on the page, it will scroll to itself. You can set a different scroll target with the data-scroll-target attribute like in the example below.
The sidebar layout should only be used as the main layout , and not in the middle of a page as in the example below.
Left aligned sidebar tab
Right aligned sidebar tab
Use the class sidebar-tabs--right to bring the tabs against the left edge of the sidebar.
In-page tabs
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Deserunt nam fugit repellat sunt. Dolores, perferendis. Eaque laudantium nobis necessitatibus. Autem vitae quidem optio nobis consequuntur maxime, deserunt voluptates ipsam dolor!
Amet, dissentiet definitiones vix te, libris quaeque repudiandae mei cu, at duo indoctum instructior delicatissimi. Et sed stet partem, enim altera eam ei. Pro erat zril omittam ea. Eu choro aeterno vix, nonumy aliquip mei ne, cum putant perpetua periculis at.
Cras pretium et elit id bibendum. Duis dapibus condimentum justo, aliquet porta justo vehicula quis. Pellentesque vulputate mattis lacus quis elementum. Vivamus vitae lobortis orci. Praesent interdum et elit non dignissim.