Tabs
Tab navigation in web design refers to a user interface pattern that allows users to switch between different sections or views of content within the same context or page.
Structure
The key elements of the tab navigation include the following:
Tab list
Inactive tabs
Active tabs
Corresponding content-panels
Divider
States
Tabs can have two states: active and inactive. An active tab is indicated by a 2px, light green (#65AC1E) underline. When a different tab is clicked, the underline moves to the newly selected tab, marking it as active.
Use case
Next to the product details on the product pages, the tab navigation is commonly used in the following cases:
Organizing and categorizing content: Tabs provide an effective way to group related information or functionality into distinct sections, making it easier for users to find and access specific content. For example product descriptions.
Saving screen space: By displaying only the currently relevant content panel, tabs allow for efficient use of limited screen space, which is especially beneficial for mobile devices or when there is a lot of content to present.
Guiding users through processes: In multi-step processes like checkout flows or form submissions, tabs can help users understand their progress and navigate between steps.
Displaying related content or views: Tabs can be used to present different types of related content or views within the same context, such as different product categories, blog post types, or user account sections.
Best Practice
Best practices for effective tab navigation design include using clear and concise labels, visually distinguishing the active tab, limiting the number of tabs, and ensuring consistent styling and behavior across tabs.
Cautious use of tabs
Overuse of tabs