Is it possible to customize the highlight style on menu item?

App Building
1

I wanted to have a border-bottom instead of a background color for the highlighted menu item, to integrate the UI design choose by my client.

I see on the navigation component that we can style the color background or text.
I wanted to customize the button but couldn't find a selector or property indicating that the button is active

image
image1721×831 87.8 KB

2

@Sandrine_B you can use CSS to add a bottom border.

.retool-widget.retool-widget-readonly._retool-container-navigation1 {
  border-bottom: 1px solid rgb(209, 20, 20);
}
3

Hi @Sandrine_B and welcome to the forums!

Another approach is to use the tabs component and switch from "Pill" to "Line" in the Appearance section:
image
Examples:
image

Either way, happy building!

1 Like
4

Tanks you @ZeroCodez this solution is interesting, but if i use a custom CSS it will potentially been overwritten by a new version of Retool.
I will take this solution as a last resort.

5

Thank you @jg80
this approach is interesting and nearest from my UI design.