Tabs
Edit this pageTabs are used to organize related content into sections that can be navigated without leaving the current page. They allow users to switch between different views of related information efficiently, with only one panel visible at a time.
NavigationContent OrganizationKeyboard AccessibleARIA CompliantResponsive
Primary Purpose of Tabs
Understanding when and why to use tabs in your interface design.
Core Purpose
- • Content Organization: Group related information into logical sections
- • Space Efficiency: Present multiple content areas in a compact interface
- • Context Preservation: Navigate content without losing current page context
- • Progressive Disclosure: Show relevant content based on user intent
When to Use Tabs
Use Tabs When:
- • Content is related but distinct
- • Users don't need to compare information
- • Space is limited
- • Content can be consumed independently
Avoid Tabs When:
- • Users need to compare content side by side
- • Information spans across multiple sections
- • Sequential workflow is required
- • Only one or two sections exist
Basic Tabs Example
Project Overview
This is the overview section containing general information about the project.
References & Further Reading
Essential references for tab component implementation and accessibility best practices.