Tabs & Subtabs - Done

Description

Tabs and subtabs are essential UI components used to organize content into separate, easily navigable sections. This structure allows users to access specific information without scrolling through long pages. Primary tabs represent high-level categories, while subtabs further divide these categories into detailed sections.

View Live Version

https://userfirst-factory.webflow.io/tabs-subtabs

Dependencies

Module	Global Dependency	Description
jQuery 3.5.1	Yes	Simplifies DOM manipulation, event handling, and animations required for dynamic components like tabs. Webflow.js internally uses jQuery and requires it as a foundational library.
webflow.js	Yes	A custom library provided by Webflow that adds functionality to components designed in Webflow, including tabs. It initializes tab components, manages active states, and ensures seamless navigation.
tabs.js	Yes	Custom JavaScript file that handles advanced tab functionalities, including deep linking, dynamic content loading, and enhanced event handling to complement Webflow's native capabilities.
tabs.css	Yes	Custom CSS file with minimal modifications to address tab-related styling that Webflow cannot handle natively.

Features

Users can click on a tab to instantly switch between different content sections without refreshing the page.

Counters on Tabs

Display numerical indicators (e.g., notifications or item counts) to provide additional information at a glance.

Hierarchical Content Structure

Subtabs within a primary tab allow users to delve deeper into specific areas of interest.

Highlighting Active Tabs

The currently selected tab and subtab are highlighted for clarity and context.

Deep Linking

Allows users to navigate directly to a specific tab or subtab via URL parameters, enhancing shareability and user experience.

Common Use Cases

Settings Pages: Organizing system, user, or application settings into categories and subcategories.

Important Notes

Matching data-w-tab Attributes

Ensure that each tab’s data-w-tab attribute exactly matches the corresponding tab pane’s data-w-tab attribute. This linkage is crucial for the tabs to function correctly.

Uniqueness of data-w-tab Attributes

Each data-w-tab value must be unique across all tabs and subtabs on the page. Duplicate values can cause unexpected behavior and conflicts in tab navigation.

How Tabs and Subtabs Work

Primary Tabs

Represent the main sections of your content.
Example: "Dashboard," "Settings."

Subtabs

Nested under primary tabs to provide a more granular organization.
Example: Under “Settings,” you can have “Profile,” “Security,” etc.

Content Display

When a tab or subtab is selected, the corresponding content is displayed, while other sections are hidden.

Active Tab Styling

The active tab is visually distinct to indicate the user’s current location.

How to Use

The tabs and subtabs structure provided here is designed to be modular and reusable. Follow these steps to integrate them into our projects:

Adding the Tabs Component

1. Copy the HTML Code:

Insert the provided HTML structure into your Webflow project or custom code block. Ensure the tabs-wrapper and tabs-container classes are included as they form the foundation of the component.

2. Customize Tab and Subtab Labels:

Modify the data-w-tab attributes and text content for both tabs and subtabs to match your desired categories. Ensure uniqueness of each data-w-tab value across the entire page.

<!-- Example of a Customized Tab -->
<a id="custom-tab-tab" data-w-tab="Custom Tab" class="tab w-inline-block w-tab-link" role="tab" aria-selected="false" aria-controls="custom-tab" tabindex="-1">
    <div class="tab-name">Custom Tab</div>
</a>

<!-- Corresponding Tab Pane -->
<div id="custom-tab" data-w-tab="Custom Tab" class="tab-pane w-tab-pane" role="tabpanel" aria-labelledby="custom-tab-tab" tabindex="0">
    <h2>Custom Tab Content</h2>
    <div class="subheading">Subheading for custom content</div>
    <div>Your custom content here.</div>
</div>

3. Customize Tab Content

Edit the content inside the tab-pane and sub-tab-content-area containers. Ensure each tab-pane matches the corresponding data-w-tab attribute.

<div id="custom-tab" data-w-tab="Custom Tab" class="tab-pane w-tab-pane" role="tabpanel" aria-labelledby="custom-tab-tab" tabindex="0">
    <h2>Custom Content Title</h2>
    <div class="subheading">Subheading for custom content</div>
    <div>Your content goes here.</div>
</div>

4. Adding Subtabs (If Needed)

If a tab requires subtabs, nest the subtabs within the corresponding tab-pane.

<!-- Subtabs within a Tab Pane -->
<div id="tab-with-subtabs" data-w-tab="Tab with Subtabs" class="tab-pane w-tab-pane" role="tabpanel" aria-labelledby="tab-with-subtabs-tab" tabindex="0">
    <h2>Main Tab Content</h2>
    <div class="sub-tabs w-tabs" role="tablist" aria-label="Sub Tabs">
        <!-- Sub Tabs Menu -->
        <div class="sub-tabs-menu w-tab-menu" role="presentation">
            <a id="subtab-1-tab" data-w-tab="Subtab 1" class="sub-tab-menu-link w-inline-block w-tab-link w--current" role="tab" aria-selected="true" aria-controls="subtab-1" tabindex="0">
                <div>Subtab 1</div>
            </a>
            <a id="subtab-2-tab" data-w-tab="Subtab 2" class="sub-tab-menu-link w-inline-block w-tab-link" role="tab" aria-selected="false" aria-controls="subtab-2" tabindex="-1">
                <div>Subtab 2</div>
            </a>
        </div>
        <!-- Sub Tabs Content -->
        <div class="sub-tab-content w-tab-content">
            <div id="subtab-1" data-w-tab="Subtab 1" class="sub-tab-content-area w-tab-pane w--tab-active" role="tabpanel" aria-labelledby="subtab-1-tab" tabindex="0">
                <h2>Subtab 1 Content</h2>
                <div>Your subtab 1 content here.</div>
            </div>
            <div id="subtab-2" data-w-tab="Subtab 2" class="sub-tab-content-area w-tab-pane" role="tabpanel" aria-labelledby="subtab-2-tab" tabindex="0">
                <h2>Subtab 2 Content</h2>
                <div>Your subtab 2 content here.</div>
            </div>
        </div>
    </div>
</div>

Deep Linking

Deep linking enhances user experience by allowing direct navigation to specific tabs or subtabs via URL parameters.

Using Deep Linking

Consistency in data-w-tab Values: Ensure that the data-w-tab values used in the URL parameters match exactly with those defined in your HTML. This includes matching cases and spaces.

URL Encoding: If your tab or subtab names contain spaces or special characters, ensure they are URL-encoded to avoid issues during parameter parsing.

Fallback Mechanism: The script includes a fallback to activate the first available tab or subtab if the specified one does not exist. This ensures that users always see content even if the URL parameters are incorrect.

Usage Example

<A href="https://yourwebsite.com/yourpage?tab=Tab%202&subtab=Subtab%201">This is a link</a>

Note: Ensure that the data-w-tab values in your HTML match the values used in the URL parameters exactly (case-sensitive).

Component Features

1. Reusability:

Tabs are built as self-contained, modular components that can be reused across different projects. Each project uses the same classes and structure for consistency.

2. Styling Updates:

Design and styling are maintained in a central CSS file. Developers do not need to adjust styles manually.

3. Accessibility:

Predefined role="tablist", role="tab", and role="tabpanel" attributes ensure accessibility compliance without additional coding.

Steps for Adding or Modifying Tabs

Adding New Tabs or Subtabs

1. Add a New Tab in the Menu:

Include a new <a> element in the tabs-menu (for primary tabs) or sub-tabs-menu (for subtabs).

<a data-w-tab="New Tab" class="tab w-tab-link">
    <div class="tab-name">New Tab</div>
</a>

2. Add a Corresponding Tab Pane:

Create a new tab-pane or sub-tab-content-area for the new tab. Ensure the data-w-tab matches.

<div data-w-tab="New Tab" class="tab-pane w-tab-pane">
    <h2>New Tab Title</h2>
    <div class="subheading">Subheading for title goes here</div>
    <div>New tab content goes here.</div>
</div>

Removing Tabs or Subtabs

1. Remove the Tab:

Delete the <a> element for the tab from the tabs-menu or sub-tabs-menu.

2. Remove the Tab Pane:

Delete the corresponding tab-pane or sub-tab-content-area for the tab.

Component Behavior

11. Active Tabs:

The w--current class is applied to the active tab, and w--tab-active is applied to the active content pane. These classes are managed automatically by JavaScript (webflow.js).

2. Dynamic Content:

Tab switching dynamically shows or hides content without requiring additional styling changes.

3. Counters:

Add <div class="counter"> to display counts or notifications within tabs.

<div class="counter">4</div>

Best Practices for Reusable Components

Maintain Consistent Structure: Always use the provided HTML classes and attributes (tabs-wrapper, tabs-container, tab-pane, etc.) to ensure compatibility with the CSS.
Avoid Custom Styles: Do not modify the CSS or classes directly. If a design change is needed, it should be discussed and if needed, updated in the master CSS shared across all projects.

Troubleshooting

Tabs Not Switching: Check that data-w-tab values in the menu match the corresponding data-w-tab in the content panes.
Active Styles Missing: Ensure the w--current and w--tab-active classes are correctly applied to active tabs and panes.
Content Overlapping: Verify that all tab panes are properly wrapped in the w-tab-content container.

HTML

<div class="tabs-wrapper">
    <div class="tabs-container">
        <div data-current="Tab 1" data-easing="ease" data-duration-in="300" data-duration-out="100" class="tabs w-tabs" role="tablist" aria-label="Main Tabs">
    
            <!-- Tab Menu -->
            <div class="tabs-menu w-tab-menu" role="presentation">
    
                <!-- Tab 1 -->
                <a id="tab-1-tab" data-w-tab="Tab 1" class="tab w-inline-block w-tab-link w--current" role="tab" aria-selected="true" aria-controls="tab-1" tabindex="0">
                    <div class="tab-icon w-embed" aria-hidden="true"><svg><!-- Icon --></svg></div>
                    <div class="tab-name">Tab 1</div>
                    <div class="counter"><div class="counter-text">2<br></div></div>
                </a>
    
                <!-- Tab 2 -->
                <a id="tab-2-tab" data-w-tab="Tab 2" class="tab w-inline-block w-tab-link" role="tab" aria-selected="false" aria-controls="tab-2" tabindex="-1">
                    <div class="tab-icon w-embed" aria-hidden="true"><svg><!-- Icon --></svg></div>
                    <div class="tab-name">Tab 2</div>
                    <div class="counter"><div class="counter-text">1<br></div></div>
                </a>
    
                <!-- Tab 3 -->
                <a id="tab-3-tab" data-w-tab="Tab 3" class="tab w-inline-block w-tab-link" role="tab" aria-selected="false" aria-controls="tab-3" tabindex="-1">
                    <div class="tab-icon w-embed" aria-hidden="true"><svg><!-- Icon --></svg></div>
                    <div class="tab-name">Tab 3</div>
                    <div class="counter"><div class="counter-text">3<br></div></div>
                </a>
    
                <!-- Tab 4 -->
                <a id="tab-4-tab" data-w-tab="Tab 4" class="tab w-inline-block w-tab-link" role="tab" aria-selected="false" aria-controls="tab-4" tabindex="-1">
                    <div class="tab-icon w-embed" aria-hidden="true"><svg><!-- Icon --></svg></div>
                    <div class="tab-name">Tab 4</div>
                </a>
            </div>
    
            <!-- Tabs Content -->
            <div class="tabs-content w-tab-content">
                <!-- Tab Panel 1 -->
                <div id="tab-1" data-w-tab="Tab 1" class="tab-pane w-tab-pane w--tab-active" role="tabpanel" aria-labelledby="tab-1-tab" tabindex="0">{Tab 1 content}</div>
    
                <!-- Tab Panel 2 -->
                <div id="tab-2" data-w-tab="Tab 2" class="tab-pane w-tab-pane" role="tabpanel" aria-labelledby="tab-2-tab" tabindex="0">{Tab 2 content}</div>
    
                <!-- Tab Panel 3 -->
                <div id="tab-3" data-w-tab="Tab 3" class="tab-pane w-tab-pane" role="tabpanel" aria-labelledby="tab-3-tab" tabindex="0">{Tab 3 content}</div>
    
                <!-- Tab Panel 4 -->
                <div id="tab-4" data-w-tab="Tab 4" class="tab-pane w-tab-pane" role="tabpanel" aria-labelledby="tab-4-tab" tabindex="0">
    
                    <!-- START Sub Tabs -->
                    <div data-current="Tab 1" data-easing="ease" data-duration-in="300" data-duration-out="100" class="sub-tabs w-tabs" role="tablist" aria-label="Sub Tabs">
                        <!-- Sub Tabs Menu -->
                        <div class="sub-tabs-menu w-tab-menu" role="presentation">
    
                            <!-- Sub Tab 1 -->
                            <a id="subtab-1-tab" data-w-tab="Tab 1" class="sub-tab-menu-link w-inline-block w-tab-link w--current" role="tab" aria-selected="true" aria-controls="subtab-1" tabindex="0">
                                <div class="sub-tab-icon w-embed" aria-hidden="true"><svg><!-- Subtab Icon --></svg></div>
                                <div>Tab 1</div>
                            </a>
    
                            <!-- Sub Tab 2 -->
                            <a id="subtab-2-tab" data-w-tab="Tab 2" class="sub-tab-menu-link w-inline-block w-tab-link" role="tab" aria-selected="false" aria-controls="subtab-2" tabindex="-1">
                                <div class="sub-tab-icon w-embed" aria-hidden="true"><svg><!-- Subtab Icon --></svg></div>
                                <div>Tab 2</div>
                            </a>
                        </div>
                        <!-- END Sub Tabs Menu -->
    
                        <!-- Sub Tabs Content -->
                        <div class="sub-tab-content w-tab-content">
                            <!-- Sub Tab Panel 1 -->
                            <div id="subtab-1" data-w-tab="Tab 1" class="sub-tab-content-area w-tab-pane w--tab-active" role="tabpanel" aria-labelledby="subtab-1-tab" tabindex="0">
                                <h2>Tab 1</h2>
                                <div class="subheading">This is some example tab content</div>
                            </div>
    
                            <!-- Sub Tab Panel 2 -->
                            <div id="subtab-2" data-w-tab="Tab 2" class="sub-tab-content-area w-tab-pane" role="tabpanel" aria-labelledby="subtab-2-tab" tabindex="0">
                                <h2>Tab 2</h2>
                                <div class="subheading">This is some example tab content</div>
                            </div>
                        </div>
                        <!-- END Sub Tabs Content -->
                    </div>
                    <!-- END Sub Tabs -->
    
                </div>
            </div>
        </div>
    </div>
</div>

Tabs & Subtabs - Done

Description

View Live Version

Dependencies

Dependencies

Features

Dynamic Navigation

Counters on Tabs

Hierarchical Content Structure

Highlighting Active Tabs

Deep Linking

Common Use Cases

Important Notes

Matching data-w-tab Attributes

Uniqueness of data-w-tab Attributes

How Tabs and Subtabs Work

Primary Tabs

Subtabs

Content Display

Active Tab Styling

How to Use

Adding the Tabs Component

Deep Linking

Using Deep Linking

Usage Example

Component Features

Steps for Adding or Modifying Tabs

Adding New Tabs or Subtabs

Removing Tabs or Subtabs

Component Behavior

Best Practices for Reusable Components

Troubleshooting

HTML