Indicate Location in Nav Bar

Hello,

I have a module that is a nav bar that I use for the head of my apps. It has each of the apps listed horizontally. A user requested a way to highlight the current app being used to help them locate themselves. Is there an easy way to do that in the nav bar? Is it different if it is a module?

This strikes me as the type of thing someone has figured out and could save me a bunch of time.

Thanks!

Burke

image

Hi @BurkeWise, there is a couple of ways we can do this! :slightly_smiling_face:

Option 1

If we are using the "Type App" for the Menu Items of the "Navigation" component, this should happen automatically:

This is how the "Module" looks from App2 with the previous setting:

Option 2

If we are using "Custom" because there are more event handlers we need to run besides opening the app, it is a bit more tedious but does not take that long to set up. We basically just need the app names or "uuids".

Go to each item under "Menu items" on the "Navigation" component, and edit the "Highlight" property to be true if we are currently on that app. To know if we are currently on the app, we can use "retoolContext."

For example, I have a folder called "Apps for Module" that contains the "Module" and three apps: 'App1,' 'App2,' and 'App3.'


In the Module, I added this value for the "Highlight" property to each one of the "Menu items."

If we would like to do this with the apps' "uuid," in case their names may change overtime, just go to each app and write `retoolContect.appUuid` and hover over it to see the current app's "uuid."

Then go back to the previous step and set the "Highlight" property using `retoolContext.appUuid == "value from app"`

This approach should get us to the same result:


Let us know if you have any questions!

1 Like

Thank you.

you are welcome! :slightly_smiling_face: