# CSS page with Tab (horizontal, vertical)
**URL:** https://community.glideapps.com/t/css-page-with-tab-horizontal-vertical/27803
**Category:** Community Resources
**Tags:** tutorial
**Created:** [June 8, 2021, 8:22pm UTC](https://community.glideapps.com/t/css-page-with-tab-horizontal-vertical/27803 "2021-06-08T20:22:17Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@Manu.n](https://community.glideapps.com/u/Manu.n)
#### Post date: [June 8, 2021, 8:22pm UTC](https://community.glideapps.com/t/css-page-with-tab-horizontal-vertical/27803/1 "2021-06-08T20:22:17Z")
Hello,
Here is a CSS to organize your page with tabs
[https://streamable.com/iw38x5](https://streamable.com/iw38x5)
> **[Tab](https://tabpublic.glideapp.io/)**
---
### Author:  [@Blue\_Community](https://community.glideapps.com/u/Blue_Community)
#### Post date: [June 8, 2021, 9:12pm UTC](https://community.glideapps.com/t/css-page-with-tab-horizontal-vertical/27803/2 "2021-06-08T21:12:13Z")
this looks really cool
care to share the code?
---
### Author:  [@Blue\_Community](https://community.glideapps.com/u/Blue_Community)
#### Post date: [June 8, 2021, 9:12pm UTC](https://community.glideapps.com/t/css-page-with-tab-horizontal-vertical/27803/3 "2021-06-08T21:12:47Z")
oh i see… nevermind… thanks for sharing this!
---
### Author:  [@Manu.n](https://community.glideapps.com/u/Manu.n)
#### Post date: [June 8, 2021, 9:15pm UTC](https://community.glideapps.com/t/css-page-with-tab-horizontal-vertical/27803/4 "2021-06-08T21:15:41Z")
You have the link to the application to copy it to your Glide area.
---
### Author:  [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)
#### Post date: [June 8, 2021, 10:41pm UTC](https://community.glideapps.com/t/css-page-with-tab-horizontal-vertical/27803/5 "2021-06-08T22:41:26Z")
I have wanted to do this for a long time. Thank you!
---
### Author:  [@Manu.n](https://community.glideapps.com/u/Manu.n)
#### Post date: [June 9, 2021, 2:15am UTC](https://community.glideapps.com/t/css-page-with-tab-horizontal-vertical/27803/6 "2021-06-09T02:15:40Z")
In the tab version, here is the vertical version !!
> **[Tab Vertical](https://tabvertical.glideapp.io/)**
---
### Author:  [@Elisaul\_Espinoza](https://community.glideapps.com/u/Elisaul_Espinoza)
#### Post date: [August 12, 2021, 9:54pm UTC](https://community.glideapps.com/t/css-page-with-tab-horizontal-vertical/27803/7 "2021-08-12T21:54:06Z")
y si quisiera que me abra un link, se puede.
ejemplo el de whatsapp
---
### Author:  [@AyS\_0908](https://community.glideapps.com/u/AyS_0908)
#### Post date: [August 12, 2021, 10:04pm UTC](https://community.glideapps.com/t/css-page-with-tab-horizontal-vertical/27803/8 "2021-08-12T22:04:14Z")
This is fantastic @Manu.n !
- Is it possible to add so fields above the inline lists? (I tried in your app, but it seems to break part of your CSS…). If not, I suppose that a Link To Screen should work
- Is there a risk that it doesn’t work on some platforms? (ios, android)
Thanks again
---
### Author:  [@Manu.n](https://community.glideapps.com/u/Manu.n)
#### Post date: [August 12, 2021, 11:36pm UTC](https://community.glideapps.com/t/css-page-with-tab-horizontal-vertical/27803/9 "2021-08-12T23:36:57Z")
Hello,
yes it is possible to add a component before the lists (between Tab # 3 and Inline-list)
And then you have to adjust the visibility parameter
After you have to test on different platforms, there is always something that is not compatible
---
### Author:  [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)
#### Post date: [August 12, 2021, 11:46pm UTC](https://community.glideapps.com/t/css-page-with-tab-horizontal-vertical/27803/10 "2021-08-12T23:46:50Z")
> [@Manu.n](#):
>
> there is always something that is not compatible
My sister has a Samsung phone and there’s always something wrong with the Samsung browser. I stopped making things 100% perfect and just accept it 🤣
---
### Author:  [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)
#### Post date: [August 12, 2021, 11:50pm UTC](https://community.glideapps.com/t/css-page-with-tab-horizontal-vertical/27803/11 "2021-08-12T23:50:46Z")
To add to what Manu said, you have to change the number inside the nth-child brackets here. If you’re adding it on top of those components then the numbers will increase. Say you add 1 then the numbers in the screenshot will become 2, 3, 4, 5, etc.
---
### Author:  [@AyS\_0908](https://community.glideapps.com/u/AyS_0908)
#### Post date: [August 13, 2021, 6:38am UTC](https://community.glideapps.com/t/css-page-with-tab-horizontal-vertical/27803/12 "2021-08-13T06:38:29Z")
Ok, I get it.
This means that, if we have many components in the screen (100 in my case) we have to build what @Manu.n proposed when we are definetely clear on the order of components in the screen… otherwise we have to re-customize the nth-child.
Is that correct?
nb: I wish I never saw this nice tab menu: I spent half the day yesterday to build an huglhy menu… now I have to rebuild everything!
---
### Author:  [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)
#### Post date: [August 13, 2021, 7:56am UTC](https://community.glideapps.com/t/css-page-with-tab-horizontal-vertical/27803/13 "2021-08-13T07:56:42Z")
Yes you must be definitely clear about where those customized components are on the screen. This includes cases when you have visibility conditions. Personally if there’s no reason to put them at the bottom I always put them at the top.
---
### Author:  [@Manu.n](https://community.glideapps.com/u/Manu.n)
#### Post date: [August 13, 2021, 7:59am UTC](https://community.glideapps.com/t/css-page-with-tab-horizontal-vertical/27803/14 "2021-08-13T07:59:51Z")
I don’t understand everything, but if you have built a page with already visibility according to your menu, the transition with CSS should be easy ???
---
### Author:  [@AyS\_0908](https://community.glideapps.com/u/AyS_0908)
#### Post date: [August 13, 2021, 10:44am UTC](https://community.glideapps.com/t/css-page-with-tab-horizontal-vertical/27803/15 "2021-08-13T10:44:37Z")
Hum, I don’t see how because for each item of my current menu (who-why | what | …), there are at least a dozen of components which are displayed.
---
### Author:  [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)
#### Post date: [August 13, 2021, 10:54am UTC](https://community.glideapps.com/t/css-page-with-tab-horizontal-vertical/27803/16 "2021-08-13T10:54:59Z")
If you only need to convert the choices to tabs then you only need to care about that.
---
### Author:  [@AyS\_0908](https://community.glideapps.com/u/AyS_0908)
#### Post date: [August 13, 2021, 12:24pm UTC](https://community.glideapps.com/t/css-page-with-tab-horizontal-vertical/27803/17 "2021-08-13T12:24:27Z")
Do you mean just changing the nth-child with the number of each Choice component?
---
### Author:  [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)
#### Post date: [August 13, 2021, 12:41pm UTC](https://community.glideapps.com/t/css-page-with-tab-horizontal-vertical/27803/18 "2021-08-13T12:41:24Z")
If I recall right Manu was using rich text components for each of those tabs, not choice components.
---
### Author:  [@burningmikey](https://community.glideapps.com/u/burningmikey)
#### Post date: [September 4, 2023, 2:19pm UTC](https://community.glideapps.com/t/css-page-with-tab-horizontal-vertical/27803/19 "2023-09-04T14:19:27Z")
Hi all,
Is there a way to create these kind of tabs now that we can’t use the CSS (Pro plan)?
With 2 tabs, we can make it work with 2 button blocks (left/right accent based on selection). With more than 2 tabs, we can use a choice component, but can’t set to wide or contain in one horizontal row.
Thank you!
---
### Author:  [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)
#### Post date: [September 4, 2023, 11:51pm UTC](https://community.glideapps.com/t/css-page-with-tab-horizontal-vertical/27803/20 "2023-09-04T23:51:30Z")
> [@burningmikey](#):
>
> With more than 2 tabs, we can use a choice component, but can’t set to wide or contain in one horizontal row.
Can you specify what you mean by “wide or contain” here?
[Next page](https://community.glideapps.com/t/css-page-with-tab-horizontal-vertical/27803.md?page=2)