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 https //userfirst factory webflow\ io/tabs subtabs dependencies 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 dynamic navigation 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 custom tab custom tab content subheading for custom content your custom content here 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 custom content title subheading for custom content your content goes here 4\ adding subtabs (if needed) if a tab requires subtabs, nest the subtabs within the corresponding tab pane main tab content subtab 1 subtab 2 subtab 1 content your subtab 1 content here subtab 2 content your subtab 2 content here 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 this is a link 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) new tab 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 new tab title subheading for title goes here new tab content goes here 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 4 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 tab 1 2 tab 2 1 tab 3 3 tab 4 {tab 1 content} {tab 2 content} {tab 3 content} tab 1 tab 2 tab 1 this is some example tab content tab 2 this is some example tab content