Search Website
Tabs
Overview
Tabs let you group related content under distinct headings, allowing users to switch between sections without scrolling through a long page. This design helps keep your interface clean and makes it easy for users to find the information they need quickly.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vulputate, mi a venenatis imperdiet, nunc tellus rutrum dolor, ut faucibus erat dui ac mi.
Sed purus arcu, varius nec tempus eu, aliquam vitae tellus. Nam tempus ligula eu nunc suscipit pretium. Ut vitae vulputate sapien. Praesent nec sapien id erat pellentesque semper. Vivamus in porttitor diam, id consectetur felis. Integer blandit gravida ex sed ultricies. Sed quis felis vestibulum, porttitor purus ac, tincidunt mauris.
| Lorem | ipsum | dolor | amet |
| Lorem | ipsum | dolor | amet |
| Lorem | ipsum | dolor | amet |
Use Cases
- Related Topics: Present multiple subjects or categories in a single view, each with its own tab.
- Step-by-Step Processes: Break down processes into logical steps, each displayed under a separate tab.
- Feature Comparisons: Organize comparisons or variations of a product or service, so users can toggle between tabs.
Best Practices
- Clear, Short Tab Labels: Keep tab names concise and descriptive so users instantly know what to expect.
- Group Related Information: Only use tabs for content that logically belongs together.
- Avoid Overcrowding: Too many tabs can overwhelm users—limit yourself to a reasonable number (e.g., 5–6 or fewer).
Page Type Compatibility
Supported in Full Width, Left Navigation, and News Article Pages.