Tabs
We use tabs to navigate between different, but related content. Tabs are commonly used on tool landing pages and on item detail pages.
![](https://assets-global.website-files.com/5f5298baab4c43a7f0640b67/6287ce7b3165fe6c8273877c_overviewIllustration-tabs.png)
Anatomy
![](https://assets-global.website-files.com/5f5298baab4c43a7f0640b67/6287ce86e9303d5bd657b7b2_tabsanatomy.png)
Tab Name
Tab names are 1-3 nouns that concisely describe the subject of the content they link to. They are title case without punctuation.
![](https://assets-global.website-files.com/5f5298baab4c43a7f0640b67/6287ce988291eca3f0a8eed7_tab-content.png)
Default list page tabs in their respective order
![](https://assets-global.website-files.com/5f5298baab4c43a7f0640b67/6287cea25812817d7a3aac02_tab-content2.png)
Default detail page tabs in their respective order
![](https://assets-global.website-files.com/5f5298baab4c43a7f0640b67/6287ceac608281c28665e990_tab-overflow.png)
Page tabs overflow menu open with selected option.
Types
Tab States
![](https://assets-global.website-files.com/5f5298baab4c43a7f0640b67/6287cebc0f0aaa1286abbe64_tab-state-hover.png)
Overflow Tab States
When tabs take up too much room (internationalization, browser window resizes, etc.) the tabs that cannot fit are rolled up into a dropdown menu. The selected tab is indicated in this menu with an orange underline and the selected menu item is blue.
![](https://assets-global.website-files.com/5f5298baab4c43a7f0640b67/6287cec638a28d11fcc7808d_tab-state-overflow.png)
Specifications
Styling
![](https://assets-global.website-files.com/5f5298baab4c43a7f0640b67/6287ceea2b9e592222476afe_tab-styling.png)