Create a link to a specific Tab in Webflow

In Webflow, it is possible to insert links or buttons with several referral options. You can refer your link to an external link, a page of your site, a phone number, an email, a section or even insert a link to download a file.

These different options are very practical, but to make more specific links, you need to do a few more things. For example, we wrote an article to link to a section of another page on your website. In today's tutorial, we'll look at how toadd a link to a specific Tab in your project.

Step 1: Insert a Tab in your project

If you haven't already done so, you can add a Tab in one of the pages of your project and style it as you wish. We also advise you to rename the different Tabs.

Step 2: Assign an ID to your Tabs Link

Then you have to select each of your Tab links and give them a specific and unique ID. We advise you to give the same name as the Tab.

Step 3: Insert code

Dans cette étape, il vous suffira seulement de copier-coller le code suivant dans les paramètres de la page qui contient le tabs. Il faudra l'insérer dans la partie "Before <!-- fs-richtext-ignore --></body> tag".

<script>
window.onload = function () {		
  const urlParams = new URLSearchParams(window.location.search);		
  const tab = urlParams.get('tab');		
  if (tab) {
    const tabButton = document.getElementById(tab)
    tabButton.click();		
  }
}
</script>

Step 4: Add a URL to your button or link

The last step before publishing your site will be to go to your link settings. You will need to select the"External URL" option and then customize the following URL for your project:

/slug-page-containing-the-tab?tab=tab-id

In our example, our Tab is located in the contact page (with the slug: contact) and the id of the Tab to which we want to redirect is restaurant. So, we add in "External URL", the following URL: /contact?tab=restaurant

Now you can send your links to the tab you want! If you don't want to miss any of our latest articles, you can subscribe to our nocode newsletter!