Tabs are used to quickly navigate between views within the same context.


  • Tabs should always be placed on top of the content they represent.
  • Tabs differ from primary forms of navigation, such as Navbars, in that they are considered to be related to each other (i.e. types of media, genres of music, etc…)
  • Users shouldn’t need to simultaneously see content from multiple tabs.
  • The currently selected tab should be appropriately highlighted.
  • Always have one tab pre-selected.
  • Tabs should be easy to scan and thus should have short, meaningful labels or icons. Avoid long text labels that don’t truncate or wrap.
  • Labels should either be all text or all icons, not both intermixed.
  • Avoid nesting tabs.
  • Make unselected tabs visible to avoid potentially hiding features/content from the user.
  • Maintain consistency by not removing tabs when their function is unavailable. Instead offer an explanation as to why a tab’s content is unavailable and present the user with an action to remedy it.
  • Always arrange tabs in an order that makes sense for the user.


  • Try to organize tabs so that the most relevant, pre-selected tab is also the leftmost tab.
  • When clicked, tabs should transition between views and highlight the selected tab.
  • Disabled tabs should have a reduced opacity, not have hover styles, and not be interactive.
  • Tab content should not disrupt the overall page layout in ways that negatively impact user experience.
  • At a smaller screen size, the tabs collapse into a dropdown.


  • Tab labels should be in all uppercase.
  • Avoid tab labels that contain more than 2 words.
  • Avoid truncating tab labels.


Tab ContainerBorder Bottom Gray 1 Gray 6
Default TabColor Trimble Gray White
Active TabColor Trimble Blue Light Dark Mode Blue
Bottom Border Trimble Blue Light Dark Mode Blue
Hover TabColor Trimble Blue Light White
Background Blue Pale Gray 8
Disabled TabColor Gray 2 White