Button Block Navigation

Ask for Help
1

Hi,

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

image
image1175×807 95.1 KB

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

2

You can achieve this with custom css.

1 Like
3

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

4

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.

/*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);
}
5

thank you I will give it a go

1 Like
6

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

1 Like
7

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

8

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.

9

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.

/*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;
}
10

That makes sense however, I am can only apply the accent colour to the left of the right button, not the middle one
image

11

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.

/* 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);   
}
1 Like
12

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