How to change the selected key for Ant Design selected menu item.
When selecting or clicking a menu item it automatically selects the unique key of the menu item. However since I’m navigating to a page. It deselects all menu items.
How to make it select a menu item even if there is a page refresh?
In the menu component when i run an interaction and run code, I can see a Key in the data picker which is a Symbol(plasmic.string) but can not change that key to be able to select a selectedKey state variable I created. Is that the selection of menu item unique key or something else?
Did you find a solution to this?
I’m also struggling to figure this one out
Unfortunately I didn’t with the Ant design menu. However I created a menu item component inside Plasmic, (not a custom code component) with a variant. This variant is selected according to the page I’m in.
The problem is you can’t use transition or effects since it abruptly selects the variant once the page loads but at least I have a selected menu variant.
I hope I made sense. If I confused you there and you want to do the same, just say and I’ll try to better explain with screenshots.
Thanks @ahmed_makki
I ended up submitting a pull request to Plasmic to add an additional feature to the Ant design menu so it can be used as a navigation menu.
It was just a simple addition of an extra Prop being available in Plasmic studio that allows you to specify which menu item is currently selected.
If you’d like a copy of the code-component version of the Antd Menu that I made, while we wait for Plasmic to merge the PR, let me know
2 Likes
@callum_boase Thank you for your contribution! We will look into it.
Thank you @callum_boase waiting patiently for Plasmic to merge this. It will make things really simple.
Unfortunately I haven’t yet used any custom code components in my projects since I’m a no coder. Will do sometime in the future but for now, my only hope is for Plasmic team to accept your pull request.
Thank you so much for looking into this and taking an action.
Hey @callum_boase, I just wanted to say a huge thank you! The joy I felt when it worked for me was beyond words. Thanks for taking the time to make a video too. Just a quick suggestion for the video – it would be great to add that the unique keys in the menu item should be the page path, just to make everything crystal clear, leaving no room for ambiguity even though it’s mentioned in the info of the ‘Selected menu item’ and ‘Default selected keys’. Thanks again!
Thank you @sarah_ahmed and the plasmic team for the quick response and action.
2 Likes
For those who are struggling with the Symbol(plasmic.string) inspected value of the key variable in data picker, here it’s what I’ve found: #9078
1 Like