Text Highlight in a Navigation Module is Not Working

I've created a module with a navigation component and it has a color set for Highlight text.

I've added this module to several apps to create consistent navigation across them I can edit globally.

Everything works fine except the highlight isn't working.

Additionally I had copied the component for this module from an app, and when it was built from the app, the highlighting worked properly.

The same error happens to me.

If you can share screenshots of the logic being used in highlight field, that should help! I tested out the highlight feature in modules and couldn't replicate the bug. It's possible that there is a scoping issue. :thinking:

My colleague has a fantastic post about Modules on the forum that you may also find a great resource!

Thanks for that! What logic is used to decide if a Menu Item is highlighted?

Previously just what I had in the screenshot. But I've recreated the setup in the module post you sent me and haven't gotten that to work:

  • Create Input for the module. name=navselector Type=Data
    *Each menu item. Type=Custom. Event handler=utils.openApp. Highlight = {{navselector.value==='APP NAME'}}

I have the highlight working somewhat by accident now. I made a new module with a vertical navigation and put that in a sidebar on my apps. Didn't specify any highlighting logic, seemed to work automatically.

@henrymeiklejohn Hmm, that should work :thinking:. Is this still an issue you're having?

If not, there may be an issue with the value of the input. Double check that the input to the module is what you were expecting.

It's not an issue with the vertical navigation+sidebar combo, which I will be using as my global navigation going forward.

But I couldn't fix the issue with the header+horizontal navigation combo I was using before.

I don't care to troubleshoot the header+horizontal navigation combo, since I'm sticking with the other setup but it does seem like a bug.

Thanks for clarifying. I'll try to reproduce this bug on our end and if so, get it documented. :+1:

Any update on this? I see the same issue for horizontal navigation. It works as a component but when I make it a module the active page no longer highlights.

None yet. I will post on this thread as soon as I have an update so feel free to follow along here!

Hi. Any update to this?

Not yet, but any updates will be shared here.

We're experiencing this issue in the self-hosted version 3.120.0.

The problem occurs in a navigation component in the header of our multi-page app (not inside a module). We have logic that uses the retoolContext object, but the issue persists even when we remove that logic and replace it with a static true value.

Our goal is to have a single navigation item highlighted across multiple related pages. However, the highlight only works for the exact page the button links to.

For example, the "Users" navigation item links to /.../users, and it correctly highlights when on that page. But when navigating to other related pages, even when we explicitly set the highlight to true, it does not persist. The same issue occurs when we restore the logic to check for related user pages.

I'm having trouble reproducing the issue. If anyone can send over an app export that would be helpful. Thank you @andrewm for the additional details.

@Elvis_Balladares @henrymeiklejohn @Gus_Ba How are you all hosted and what versions are you on (if applicable)?