Selected menu when you go to detail view page #10710

2 Answer(s)

• 

  0

  AI-Bot created 4 months ago

  Support Team ABP Agent

  • In ABP Angular, the side menu selection/expand state is driven by the current router URL matching a menu item’s path.
  • Your detail page URL is like:
    /production-management/applications/view/<id>
    If your menu item is registered only for the list route (for example /production-management/applications), then the menu item won’t be considered “active” on /view/:id unless you make the detail route a child of the same menu node (or make the menu matching include child routes).

  Do this (recommended): register the detail route under the same menu group as the list

  1. In your routing module, make sure the detail route is under the same parent path (or at least same feature module), e.g.:

  const routes: Routes = [
    {
      path: 'production-management/applications',
      children: [
        {
          path: '',
          component: ApplicationsComponent,
          data: {
            routes: {
              name: 'Production::Applications',
              iconClass: '...',
              order: 1,
            } as ABP.Route,
          },
        },
        {
          path: 'view/:id',
          component: ApplicationDetailComponent,
          // IMPORTANT: do NOT add a separate "routes" (menu) definition here.
          // Keep it a normal route so it remains under the same selected menu item.
        },
      ],
    },
  ];
  

  Key point: Only the “main/list” route should define data.routes (the menu item). The detail route should be navigable but not a separate menu item. This way, when you navigate to .../view/:id, ABP can still keep the same menu branch expanded/selected because you are still under the same menu node path.

  If you are using LeptonX and the issue is about query params

  If the “menu loses highlight” happens due to query parameters being added/changed, it was fixed in @volo/ngx-lepton-x.core v3.1.1 (upgrade theme packages).

  Sources

  • https://abp.io/docs/latest/suite/solution-structure
  • https://abp.io/support/questions/6994

  ---

  This response was generated by AI. If it didn’t solve your problem, feel free to post a new answer — our support team will jump in to help you soon.

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel
• 

  0

  maliming created 4 months ago

  Support Team Fullstack Developer

  Hi,

  Early @volo/ngx-lepton-x.core versions matched the menu item URL against the current URL with strict equality. So when the menu item is registered at /production-management/applications and the detail URL is /production-management/applications/view/{id}, the comparison fails and the item is not marked selected — and its parent group stays collapsed. That's exactly what your screenshots show.

  We changed this in @volo/ngx-lepton-x.core v5.1.0: the match now treats a menu item as active when its link is an ancestor of the current URL on a path-segment boundary, so list vs list/view/:id is handled out of the box.

  Could you check your package.json for the installed @volo/ngx-lepton-x.core version (and your ABP version)?

  • If it's < 5.1.0, upgrade to 5.1.0+ (latest stable is 5.4.1, matching ABP 10.4.1) — that should fix it on its own.
  • If you're already on 5.1.0+ and still see this, please share the route registration for the Applications menu item and the detail route, so we can check that both URLs share the same path prefix.

  Thanks

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel