Navigation - Highlight the menu item when clicked

App Building
,
1

Hi all,
I am looking for answers to these two questions.

  1. From JS, what is the exact syntax to get the current selected menu item of a navigation component in Retool?
  2. Once a menu item is clicked, I wish to have it highlighted by default. Should I do this through JS or is there an existing functionality in Retool for the same?
    Thanks in advance.
2

@dhivya_sabapathy Welcome to the forum!

See the Styles section in the component in the Inspect panel
Screenshot 2023-01-30 at 9.57.10 AM

3

Hey there! This is also a great post describing how you might highlight people's selections! It uses a temp state to store information about the selection itself which may help with 1. as well.

1 Like
4

Thank you @Kabirdas for your response. I see that we have to manually mention the highlight boolean. It would be really great if this could be linked to the click event of the menu item.

Also, what is the best way to show/hide components in the container based on the menu selection item. Something like {{navigation1.current_selection}}

5

Hi @ScottR , in the Styles section of navigation component, I am able to see only the following options. No highlight.
Default
Any help would be appreciated.
Also, I would like to set the value of a temp.state based on the selected navigation menu item. How to do that?

6

Hey @dhivya_sabapathy! What version of Retool are you currently using? There were significant changes introduced to the navigation component in 2.99. If you're on a version before that most of this may not be relevant :disappointed:

To set the value of the temp state you'd want to add an event handler to each item:

960×954 199 KB

You can then also reference that temp state value to show/hide other components.

I've linked an app you can play around with, though be warned that using it on older versions of Retool may prompt some inconsistent behavior!
highlight_selection_nav.json

1 Like
7

Thanks @Kabirdas I just switched to using tabbed container which is much more convenient to use than the navigation menu. Thank you so much!