Tabs

Tabs can be used within a page to show alternate views of information and, though rarely used, as navigation between pages.

Repository

  • cf-tabs

    Tabs in the Capital Framework

UseView code

We’ve identified two use cases for tabs: to show alternate views of information within a page and, though rarely used, as navigation between pages. For both use cases, tabs are replaced by expandables when the screen size becomes too small to display tabs.

1. To show alternate views of the same information

Consider using tabs when content needs to be separated into sections, but there’s limited visual space.

Use them if:

  • Content for each tab is related and has a similar structure
  • The content in each tab does not have to be viewed or compared at the same time
  • Tabs fit in a single row (ideally between 2 – 9 tabs)
  • Tabs have short, categorical names (1-3 words)

Do not use if:

  • Content in separate tabs needs to be compared
  • The content is long and requires scrolling inside the tab
  • The content is very short or only text-based (an expandable may be more appropriate)
  • You’re using tabs to show a decision (a more discrete interaction like a switch or radio button may be more appropriate)

(Live Example of tabs use case 1)

2. To navigate through a process

Tabs are generally not recommended for navigation, but can be used for leading users step by step through a task. Because they divide a complex task into individual steps, each chunk becomes easier to deal with because it provides a discrete “mental space” for the user, and effectively simplifies the task. None of the tabbed pages are as effective on their own as they are as part of a set.

Use tabs for navigation if:

  • The task is long or complicated and usually novel for users
  • You’re reasonably certain that we (designers, CFPB) will know more than the user about how best to get the task done
  • The entire width of a page is needed for content and navigation. Testing should be done to confirm this before moving away from the left-hand navigation.
  • Tabs fit in a single row (ideally between 2 – 9 tabs)
  • Tabs have short, categorical names (1-3 words)

Do not use them if:

  • Your planned usage is due more to stakeholder desire rather than actual need
  • Tabs are being used as a progress indicator and aren’t actually clickable. (Users should be able to access any tab at any time)

(Live Example of tabs use case 2)

StyleView code

Large screens

  • Tabs should be equal width to fit page or column
  • 60 px height
  • 1 px, Gray 50% border on top, bottom and dividing lines
  • 22px Avenir Next Regular (H3), left aligned, vertically centered, 30px padding-left

Medium and small screens

(Example with measurements)

StatesView code

Active

  • White background color
  • No bottom border
  • 3px, Green midtone border-top
  • Black type

(Example of active tab)

Hover

  • White background color
  • Black type

(Example of tab on hover state)

Inactive

  • Gray 5% background color
  • Gray 80% type

(Example on inactive tab)