Webflow Tips & Tricks: Make first tab default tab

Are you having issues with Webflow's tab navigation and want a particular tab to open right away when the user is navigating to a page? Have a look at the solution shown in this blog article.

Are you using tabs as a navigational tool on your own or your client's website? It can be a great way to organise information on a page, but has some pitfalls as well. One of them is the fact that at the time of writing you are not able to make one particular tab the "default" tab that opens when the user visits the particular page. To achieve this you would have to leave the tab open in the designer that you want to default to. Not a great solution, but don't worry, there's help available via custom code. To make the first tab the default tab, follow the 5 steps below:

  1. Navigate to the page you're using the tab navigation
  2. Open the page settings for this page via Webflow's Pages Navigator (P) and press the little cog button
  3. Here you can access the Custom Code area and scroll down to the "Inside <head> tag" section
  4. Enter the following code into this section:
    <script>$(".tab-link:nth-child(1)").addClass("w--current");</script>
  5. Replace the class ".tab-link" with the class you've used for the tab link you want to make default

Keep in mind that if you are using Webflow's own pagination feature inside one of your tab panes, there might be issues and the pagination for this section might stop working.

Want some more info on this? Check out the following thread in the Webflow forum, which I found very helpful and have based my solution on: Setting Default Active Tab.

Let's work together

Fill out the form below and I'll be in touch with you usually within 48 hours. You can also say hi

Thanks! I'll be in touch with you shortly.
Oops! Something went wrong! Please get in touch via email instead.