Tabs and conditional rendering

[TracyY (Tracy)]

Hi everyone,

Im using the Tab native element from weweb.

I’m trying to have different tabs depending on the user type.

for example:

normal user tabs: Profile, Conditions, Settings.
admin user: Profile, Admin, Conditions, Settings.

In this case, normal user doesn’t have “admin” tab, and admin user does. Until here all clear.

The problem comes when I try to hide this admin tab with the conditional rendering, yes it hides but it leaves an empty space. (yes, I hid the div not only the text)

Anyone know how to fix it? I tried creating a new component with the ai but no success. It’s a pity because the element is super useful but if this doesn’t work I can’t use it.

thanks!

[Agustin_Carozo (Agustin M. Carozo)]

Hi Tracy

I just tested this with the native Tabs element and can confirm the same behavior on my side, when a tab is hidden via conditional rendering, the whitespace for that tab is still there.

One workaround you could explore is forking the Tabs element and tweaking the logic so hidden tabs are completely removed from the layout instead of just hidden. If you’re comfortable using AI code tools, you could fork the element and then iterate on the code with something like Cursor or Claude.

Tutorial on Cursor
Tutorial on Claude Code
Link to the base element

Hope this helps