# CSS: Choice component as a menu

**URL:** <https://community.glideapps.com/t/css-choice-component-as-a-menu/31118>\
**Category:** Ask for Help\
**Created:** [August 29, 2021, 11:14pm UTC](https://community.glideapps.com/t/css-choice-component-as-a-menu/31118 "2021-08-29T23:14:52Z")\
**Posts on this page:** 12\
**Page:** 2

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [February 21, 2023, 9:42am UTC](https://community.glideapps.com/t/css-choice-component-as-a-menu/31118/21 "2023-02-21T09:42:13Z")

</div>

You can create the same functionality in Pages, but you don’t have the CSS styling options.

---

<div class="post-metadata">

**Author:** ![IlseB](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ilseb/32/44063_2.png) [@IlseB](https://community.glideapps.com/u/IlseB)\
**Post date:** [February 21, 2023, 9:45am UTC](https://community.glideapps.com/t/css-choice-component-as-a-menu/31118/22 "2023-02-21T09:45:38Z")

</div>

Could you perhaps give me a clue on how this would work?

 ![Screenshot 2023-02-21 at 11.44.50](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/9/d95fcb2106056cdfeb81ef2595bdd813b26da956.png)  
here is the tabs im trying to style a bit better (general/timeline/sales/profile)

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [February 21, 2023, 9:50am UTC](https://community.glideapps.com/t/css-choice-component-as-a-menu/31118/23 "2023-02-21T09:50:19Z")

</div>

So you want the content below to change based on which choice is selected, yes?

There are a few ways to approach it. A fairly simple approach would be to use visibility conditions. So configure 4 containers, one for each of the options. And then set the visibility condition on each container such that it is only visible when the associated choice value is selected.

---

<div class="post-metadata">

**Author:** ![IlseB](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ilseb/32/44063_2.png) [@IlseB](https://community.glideapps.com/u/IlseB)\
**Post date:** [February 21, 2023, 9:56am UTC](https://community.glideapps.com/t/css-choice-component-as-a-menu/31118/24 "2023-02-21T09:56:16Z")

</div>

Hi Darren,

Apologies, i have managed to set the visibility via the choice component succesfully - however, what im trying to do is, style the choices to look more like tabs instead of the current circled boxes . im not sure how to do this in pages?

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [February 21, 2023, 9:59am UTC](https://community.glideapps.com/t/css-choice-component-as-a-menu/31118/25 "2023-02-21T09:59:42Z")

</div>

Unless you’re on a business or enterprise plan, that’s not possible I’m afraid.

I think the closest you could get would be to replace the choice component with 4 rich text components and apply inline styling (which can be done in Pages)

---

<div class="post-metadata">

**Author:** ![IlseB](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ilseb/32/44063_2.png) [@IlseB](https://community.glideapps.com/u/IlseB)\
**Post date:** [February 21, 2023, 10:14am UTC](https://community.glideapps.com/t/css-choice-component-as-a-menu/31118/26 "2023-02-21T10:14:49Z")

</div>

> [@Darren\_Murphy](#):
>
> tylin

thanks alot let me give that a go…

---

<div class="post-metadata">

**Author:** ![IlseB](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ilseb/32/44063_2.png) [@IlseB](https://community.glideapps.com/u/IlseB)\
**Post date:** [February 24, 2023, 10:20am UTC](https://community.glideapps.com/t/css-choice-component-as-a-menu/31118/27 "2023-02-24T10:20:46Z")

</div>

> [@Darren\_Murphy](#):
>
> with 4 rich text components and apply inline styling (which can be done in Pages)

Could you please share an example of such component?

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [February 24, 2023, 11:52am UTC](https://community.glideapps.com/t/css-choice-component-as-a-menu/31118/28 "2023-02-24T11:52:10Z")

</div>

Well, I’m no CSS wizard, but is this something like the effect you’re looking for?

![CleanShot 2023-02-24 at 19.50.28](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/3/6383cb00b74fb470381cc8263db2da9519b75080.gif)

---

<div class="post-metadata">

**Author:** ![IlseB](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ilseb/32/44063_2.png) [@IlseB](https://community.glideapps.com/u/IlseB)\
**Post date:** [February 24, 2023, 12:47pm UTC](https://community.glideapps.com/t/css-choice-component-as-a-menu/31118/29 "2023-02-24T12:47:39Z")

</div>

Foresure, it looks much better than the round button ones

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [February 24, 2023, 12:58pm UTC](https://community.glideapps.com/t/css-choice-component-as-a-menu/31118/30 "2023-02-24T12:58:15Z")

</div>

Okay, so what you see there is a 4 column container, with each container having 2 rich text components. You need 2 in each container - one for when the button is selected, and one for when it isn’t.

The HTML with inline CSS that I used for each:

Selected:

```auto
<center>
<span style="
	background-color: #4DB0D5;
	border: none;
    border-bottom: blue solid 4px;
    color: white;
    padding: 10px 50px;
  	text-align: center;
  	text-decoration: none;
  	display: inline-block;
  	font-size: 16px;
  	margin: 4px 2px;
  	cursor: pointer;
">General</span>

```

Not selected:

```auto
<center>
<span style="
	background-color: #4DB0D5;
	border: none;
    color: white;
    padding: 10px 50px;
  	text-align: center;
  	text-decoration: none;
  	display: inline-block;
  	font-size: 16px;
  	margin: 4px 2px;
  	cursor: pointer;
">General</span>

```

The only difference between the two is the `border-bottom` property, to add and remove the horizontal line at the bottom.

Obviously, you could tweak that to your liking.

To get the select/deselect effect, it’s just a matter of combining actions and visibility conditions. This is how I did it:

- Each of the button pairs has an associated user specific boolean column. One button is visible when the column is checked, and the other is shown when it is not.
- All 8 buttons have an associated actions. The odd numbered pairs set the associated boolean to true, and clear the other 3. The even numbered pairs clear all 4 booleans.

To make them work like a choice component, you’d just need to extend the actions on the odd numbered pairs to set the user specific column that your choice component otherwise would have.

---

<div class="post-metadata">

**Author:** ![IlseB](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ilseb/32/44063_2.png) [@IlseB](https://community.glideapps.com/u/IlseB)\
**Post date:** [February 26, 2023, 5:12pm UTC](https://community.glideapps.com/t/css-choice-component-as-a-menu/31118/31 "2023-02-26T17:12:37Z")

</div>

> [@Darren\_Murphy](#):
>
> Each of the button pairs has an associated user specific boolean column

do you think there is a way to ensure the buttons present next to each other? i played around on mobile view with the container columns but it seems to default to below each other on mobile view?

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [February 27, 2023, 12:20am UTC](https://community.glideapps.com/t/css-choice-component-as-a-menu/31118/32 "2023-02-27T00:20:43Z")

</div>

I’m not sure what your layout is, but if there isn’t enough space in a container column then it will get pushed to the next row. If you think your device still have enough space then that’s a bug.

[Previous page](https://community.glideapps.com/t/css-choice-component-as-a-menu/31118.md?page=1)