Tabs
Stay organized with collections
Save and categorize content based on your preferences.
Tabs organize content across different screens, data sets, and
interactions. Tabs can be used to switch between views of distinct and
related groups of information.
Resources
Highlights
- Tabs can scroll horizontally. A UI can have as many tabs as needed.
- Tabs organize content into categories to help users find
different types of information quickly.
- Tabs are displayed next to each other as peers, in categories
of equal importance.
Variants
There are two types of tab indicators:
- Pill indicator
- Bar indicator
Choose the right type according to emphasis. Pill indicator tabs are
recommended for organizing full pages. They display the main content
destinations. Bar indicator tabs are used within a content area to further
separate related content and establish hierarchy.
Anatomy
- Icon (optional)
- Label
- Active indicator
- Pill
- Bar
- Container
States
- Default
- Focused
- Selected
Specs
Behavior
When moving from one tab to the next the content below also slides left or
right based on the tab movement.
Content and code samples on this page are subject to the licenses described in the Content License. Java and OpenJDK are trademarks or registered trademarks of Oracle and/or its affiliates.
Last updated 2024-08-19 UTC.
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"Missing the information I need"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"Too complicated / too many steps"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"Out of date"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"Samples / code issue"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"Other"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"Easy to understand"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"Solved my problem"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"Other"
}]
{"lastModified": "Last updated 2024-08-19 UTC."}
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2024-08-19 UTC."]]