Skip to main content


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.


Element Property Color
Tab Container Border Bottom Gray 1 Gray 6
Default Tab Color Trimble Gray White
Background Transparent
Active Tab Color Trimble Blue Light Dark Mode Blue
Bottom Border Trimble Blue Light Dark Mode Blue
Background Transparent
Hover Tab Color Trimble Blue Light White
Background Blue Pale Gray 8
Disabled Tab Color Gray 2 White
Background Transparent