# Tabs and conditional rendering

**URL:** <https://community.weweb.io/t/tabs-and-conditional-rendering/20668>\
**Category:** How do I?\
**Created:** [January 19, 2026, 5:41pm UTC](https://community.weweb.io/t/tabs-and-conditional-rendering/20668 "2026-01-19T17:41:52Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![TracyY](https://avatars.discourse-cdn.com/v4/letter/t/96bed5/32.png) [@TracyY](https://community.weweb.io/u/TracyY)\
**Post date:** [January 19, 2026, 5:41pm UTC](https://community.weweb.io/t/tabs-and-conditional-rendering/20668/1 "2026-01-19T17:41:52Z")

</div>

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!

 ![Captura de pantalla 2026-01-19 a las 17.31.57](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/5/5a3128af213fdf1a51290910515e8a77560f1efa.png)

 ![Captura de pantalla 2026-01-19 a las 17.32.42](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/7/79d3032a15f262acbae100a26e7b2bf7addf428e.png)

---

<div class="post-metadata">

**Author:** ![Agustin\_Carozo](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/agustin_carozo/32/13231_2.png) [@Agustin\_Carozo](https://community.weweb.io/u/Agustin_Carozo)\
**Post date:** [January 20, 2026, 2:37pm UTC](https://community.weweb.io/t/tabs-and-conditional-rendering/20668/2 "2026-01-20T14:37:44Z")

</div>

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](https://www.youtube.com/watch?v=1A8wdH5Sb0o)  
[Tutorial on Claude Code](https://www.youtube.com/watch?v=s9HwpkSKONM)  
[Link to the base element](https://github.com/weweb-assets/ww-tabs#)

Hope this helps 🙂