# Button Block Navigation

**URL:** <https://community.glideapps.com/t/button-block-navigation/76409>\
**Category:** Ask for Help\
**Created:** [September 16, 2024, 10:59am UTC](https://community.glideapps.com/t/button-block-navigation/76409 "2024-09-16T10:59:35Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![Si\_Gal](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/si_gal/32/79433_2.png) [@Si\_Gal](https://community.glideapps.com/u/Si_Gal)\
**Post date:** [September 16, 2024, 10:59am UTC](https://community.glideapps.com/t/button-block-navigation/76409/1 "2024-09-16T10:59:35Z")

</div>

Hi,

I am hoping to use a button block as a navigation tool.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/8/c811065a89bf99504d70da26dcb5cac980d5f6b5.png)  
However, I would like the show the user which button has been clicked but the options only appear to be left, none or right. Can I make this dynamic?

Thanks

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [September 16, 2024, 11:02am UTC](https://community.glideapps.com/t/button-block-navigation/76409/2 "2024-09-16T11:02:49Z")

</div>

You can achieve this with custom css.

[![](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/5/e50c735cdf23ea9774cd310170ce0831100d1ce2.webp) ](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/5/e50c735cdf23ea9774cd310170ce0831100d1ce2.webp)

---

<div class="post-metadata">

**Author:** ![Si\_Gal](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/si_gal/32/79433_2.png) [@Si\_Gal](https://community.glideapps.com/u/Si_Gal)\
**Post date:** [September 16, 2024, 12:39pm UTC](https://community.glideapps.com/t/button-block-navigation/76409/3 "2024-09-16T12:39:11Z")

</div>

thanks, could you be happy to share the CSS for your example?

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [September 16, 2024, 1:00pm UTC](https://community.glideapps.com/t/button-block-navigation/76409/4 "2024-09-16T13:00:11Z")

</div>

The class name is **menu-button**  
Change :nth-child(n) to suit your menu structure.  
Add code according to the number of your navigation menus.

```auto
/*Custom menu 1*/
#page-root:has(nav ul > li:nth-child(1) > .menu-item.active) .menu-button button:nth-child(1) {
background-color: var(--gv-w10A);   
}
/*Custom menu 2*/
#page-root:has(nav ul > li:nth-child(2) > .menu-item.active) .menu-button button:nth-child(2) {
background-color: var(--gv-w10A);
}

```

---

<div class="post-metadata">

**Author:** ![Si\_Gal](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/si_gal/32/79433_2.png) [@Si\_Gal](https://community.glideapps.com/u/Si_Gal)\
**Post date:** [September 16, 2024, 1:40pm UTC](https://community.glideapps.com/t/button-block-navigation/76409/5 "2024-09-16T13:40:58Z")

</div>

thank you I will give it a go

---

<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:** [September 16, 2024, 3:15pm UTC](https://community.glideapps.com/t/button-block-navigation/76409/6 "2024-09-16T15:15:27Z")

</div>

Is that meant to adjust what component is shown right on that tab? I think using a choice component is better in that case.

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [September 16, 2024, 3:46pm UTC](https://community.glideapps.com/t/button-block-navigation/76409/7 "2024-09-16T15:46:35Z")

</div>

Sorry I wasn’t careful, isn’t this for tab navigation?

---

<div class="post-metadata">

**Author:** ![Si\_Gal](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/si_gal/32/79433_2.png) [@Si\_Gal](https://community.glideapps.com/u/Si_Gal)\
**Post date:** [September 17, 2024, 8:40am UTC](https://community.glideapps.com/t/button-block-navigation/76409/8 "2024-09-17T08:40:54Z")

</div>

Yes this is for a navigation menu. I have an action on each button to set a user specific column and that is used to filter what is shown on hte screen. Ideally, when for example ‘FF&E’ is clicked and the value in the user table is set to ‘FF&E’ the button would be the accent colour.

---

<div class="post-metadata">

**Author:** ![Eric\_Penn](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/eric_penn/32/73888_2.png) [@Eric\_Penn](https://community.glideapps.com/u/Eric_Penn)\
**Post date:** [September 17, 2024, 9:05am UTC](https://community.glideapps.com/t/button-block-navigation/76409/9 "2024-09-17T09:05:26Z")

</div>

You could use this CSS to alter the button color… make three copies of the button block with accent color on each button… then conditionally hide the button blocks with visibility settings.

When the AI component becomes more stable I’d use it instead.

```auto
/*Change button background color*/
.mybutton [aria-label="BtnName"] {
background-color: rgba(0, 255, 0, 0.1);
}

/*Change button label color*/
.mybutton [aria-label="BtnName"] > div {
color: red;
}

/*Change button icon color*/
.mybutton [aria-label="BtnName"] svg {
color: green;
}

```

---

<div class="post-metadata">

**Author:** ![Si\_Gal](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/si_gal/32/79433_2.png) [@Si\_Gal](https://community.glideapps.com/u/Si_Gal)\
**Post date:** [September 17, 2024, 9:18am UTC](https://community.glideapps.com/t/button-block-navigation/76409/10 "2024-09-17T09:18:54Z")

</div>

That makes sense however, I am can only apply the accent colour to the left of the right button, not the middle one  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/7/d7b51b1b8d5241fa011d659e239d2475f39f390a.png)

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [September 17, 2024, 10:01am UTC](https://community.glideapps.com/t/button-block-navigation/76409/11 "2024-09-17T10:01:23Z")

</div>

> [@Si\_Gal](#):
>
> I have an action on each button to set a user specific column and that is used to filter what is shown on hte screen

This isn’t a navigation menu but simply a filter based on the value you’ve set. You can use the choice component as Thinhdinh suggested. However, if you still want to use button block components, besides naming the button components with the **`menu-button`** class, you also need to assign class names to one of the components based on the conditions for their appearance, like **`compA`** , **`compB`** , and **`compC`**.

```auto
/* Filter menu 1 */
#page-root:has(.compA) .menu-button button:nth-child(1) {
    background-color: var(--gv-w10A);   
}

/* Filter menu 2 */
#page-root:has(.compB) .menu-button button:nth-child(2) {
    background-color: var(--gv-w10A);   
}

/* Filter menu 3 */
#page-root:has(.compC) .menu-button button:nth-child(3) {
    background-color: var(--gv-w10A);   
}

```

---

<div class="post-metadata">

**Author:** ![system](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/system/32/53398_2.png) [@system](https://community.glideapps.com/u/system)\
**Post date:** [September 24, 2024, 10:01am UTC](https://community.glideapps.com/t/button-block-navigation/76409/12 "2024-09-24T10:01:38Z")

</div>

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.