How can I create separate URL links for each tab in Webflow?

To create separate URL links for each tab in Webflow, you’ll need to use custom code because Webflow’s default Tabs component does not generate unique URLs for each tab. Here's how to do it:

​

1. Structure Your Tabs with Unique IDs

​

• Assign custom IDs to each tab pane (the content sections of each tab).
• In the Navigator, select each tab pane and go to the Element Settings panel.
• Under ID, set unique values like tab-1, tab-2, etc.

​

2. Use Custom Code to Update and Read the URL Hash

​

• In your Page Settings, scroll to the Before </body> tag section.
• Add JavaScript that does two main things:
• Reads the URL hash (e.g., #tab-2) on page load and activates the matching tab.
• Updates the URL hash when a user clicks a different tab.

• Example behavior to implement (in plain language):
• On page load, check if the URL contains a hash like #tab-2; if so, trigger that tab’s click event.
• Whenever a tab is clicked, update the URL hash to match the clicked tab pane’s ID.

​

3. Trigger Tab Clicks Programmatically

​

• Use JavaScript to simulate clicking the correct tab based on the hash.
• When a user clicks a tab, dynamically update window.location.hash to store the state.

​

4. Publish and Test

​

• Publish your project and go to the live site.
• Test by entering direct URLs like https://yourdomain.com/#tab-2 and confirming the correct tab opens automatically.

​

Summary

​

Webflow doesn't support unique tab URLs by default, so you must assign custom tab pane IDs and add custom JavaScript to handle reading and writing URL hashes. This allows you to link directly to specific tabs on your page.

​

Let me know if you want the exact JS code implementation.