We’ve created a navigation where clicking a particular route opens the expected page and highlights the nav item correctly. However, I have additional routes (nested sub-pages, when url is change) that should also be associated with the same navigation item. Currently, when these routes are accessed directly, the nav item is not shown as selected. I need a way to ensure that even for nested or related routes, the navigation item stays highlighted as active.
Any suggestions or examples for handling this in a Shopify Remix app would be appreciated.
Yes, we’re using NavMenu and Link. For example, we have a navigation item named “Collection Rules” which links to the route app/collection-rules/list. This is the listing page where users can view and create rules. However, when we click on “Create”, it redirects to app/collection-rules/add. In this case, the selected navigation item resets to the default instead of staying active.
I had the same issue and solved it by implementing nested routing with proper navigation highlighting. The problem occurs because the navigation is checking for an exact route match instead of checking if you’re within the parent route tree.
Restructure your routes to use proper nesting. Create three files: app.collection-rules.jsx (parent layout containing only <Outlet />), app.collection-rules._index.jsx (your list page that auto-renders at /app/collection-rules), and app.collection-rules.add.jsx (your adding form). The underscore in _index.jsx tells Remix this is the default route, so it automatically renders when you visit the parent path without needing any redirects.
then ,verify your current route structure by running npx remix routes in your terminal. This will show you how Remix is interpreting your route files. If your child routes aren’t showing up nested under the parent, that’s your first clue something’s wrong with the file naming.
