How to make such nested tabs?

How to make such nested tabs in webflow?
“Bootcamp Foundation” and “Standart kurslar” are parent tabs.
“Toshkent filiallari” and “Boshqa filiallar” are nested tabs.
In the right side is a tab content. Pls, show me the direction to make such tabs. I have found other ready made templates, but they are not suitable for me. I have found this template :down_arrow:

Hi there,

Here’s how to create a layered tab structure in Webflow:

  1. Navigate to the Add panel and locate the Tabs element in the components section
  2. Drag the Tabs element onto your canvas - this will create both the Tabs Menu (navigation) and Tabs Content sections
  3. To add more tabs, select the Tabs element and use the plus icon in the Element Settings panel
  4. For nested tabs (tabs within tabs):
    • Select the element where you want to add nested tabs
    • Open either the Style panel or Element Settings panel
    • Click the “create component” icon
    • Add a new Tabs element inside your existing tab content

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

In your layout, your tabs and your content are not directly adjacent, which means using the Webflow tab control won’t really suit this layout.

Instead, build this using interactions.

Your top two buttons hide/show the divs below, which contain additional text and buttons

Those smaller buttons hide and show element sin your right-side pane.

If you happen to be building this entire construction from CMS content, have a look at Finsweet’s new v2 filters. You’d have a learning curve on the configuration, but it should be possible to build this fully, including CMS sourced primary tabs, secondary tabs, and right-side items.

Thanks for your answer.

I made this using only webflow tabs.
Here is my read only link

Website link https://najot-talim.webflow.io/

Now the question is how to change the color of the icons when the tab is changed?
This is how it looks like in design


But I could not implement this. I used only dark icons for both of them

I tried to changed it with display none and block based on current state of the tab, but it did not work. Any ideas?

Since you’re not using interactions, you can’t simply target and style it on switch.

Instead you’ll need to use custom CSS to style the icon when the tab is selected. Use chrome devtools to inspect the HTML and CSS and you can determine what CSS to write that way.

Most would approach this with an SVG and change currentcolor plus it looks like a glow effect might be there. Or you can just have two icons and show/hide.