Tabs Section where just a limited part slides

Hi guys, I am new to the community and I hope that I’m doing it right asking here about an issue that I just had trying to create a Tabs element in my design.

I’d like to create something like this but it seems that this design has a bug (maybe because of the lack of the Tab Content element!)

Can you help me? I really love the idea of creating a tab section where just a limited part slides!


Welcome Paul!

You’re doing right, never hesitate!

So, step one, where you can see the structure of a tab element:

Step 2: we’ve added a DIV, put the Tab element inside, and added another div inside of it as a sibling of the tab element

Step 3: we have colored the sibling div in blue and gave it width 50%, we’ve gave the tab element width 50% and position:auto, and we’ve made the outer (parent) div Flexbox and position:relative

Now we select the tab menu element and give it position:absolute and corner top right

Now we add a padding top to the outer div so the menubar isn’t overlapping the content below

Let’s center the nav menu to mimick your example

That’s pretty much it. What we’ve done is define a reference for the opsition of the menu by giving the outer div position:relative and removing the position:relative property of the tab element, so we can move the menu bar around. Now you have your tab content with static content on it’s left.

1 Like

Thank you, Vincent :smile::smile::smile: