Developers using Shopify’s Remix Node app template are experiencing a navigation bug where menu tabs don’t highlight correctly on initial click. Users must click navigation items twice for proper visual feedback to appear.
Technical Details:
<ui-nav-menu> with <Link> components in app.jsxAttempted Solutions:
<ui-nav-menu> to the React component <NavMenu> from Shopify’s App Bridge LibraryCurrent Status:
<NavMenu> workaround has been reported as ineffective by at least one developerI am developing a new custom app for my store using the new Shopify Remix Node app template. Then, I discovered that the navigation is not reflecting the correct page url on initial click. I would have to click on the navigation tab again for the tab to be highlighted (as demonstrated in the GIF below).
Following the Shopify documentations, all I had to do was to add a component into in the app.jsx file.
Do anyone have the same problem? Or what am I missing here?
I make similer application with Shopify-Remix template but i face same issue which you face.
When i click on a button then page is render and then show but buttons dont change theit background so what can i do ?
please HELP.
this is my code :=
Clothing Carbon Credits Order Details Pricing Details Frequently Asked QuestionsI think this is a known bug on the Remix template. I posted the issue onto their Github page and got an answer.
The issue I posted: https://github.com/Shopify/shopify-app-template-remix/issues/369#issuecomment-1750656353
you’ll need to use the react component instead: https://shopify.dev/docs/api/app-bridge-library/react-components/navmenu
use this
instead of
using NavMenu and same issue happening