Nav Bar Items rendered in new order and new theming #10743

2 Answer(s)

• 

  0

  AI-Bot created 2 months ago

  Support Team ABP Agent

  • In ABP Angular, the right-side navbar items are rendered by NavItemsService, and their order is determined by each item’s order value. After upgrading, ABP/theme packages may have changed the default order values of built-in items, so the visual order can change even if you didn’t customize anything.

  Change the order without replacing the whole navbar component

  You can patch the built-in items and set their order:

  // e.g. app.component.ts (constructor) or an app initializer
  import { Component, inject } from '@angular/core';
  import { NavItemsService } from '@abp/ng.theme.shared';
  import { eThemeBasicComponents } from '@abp/ng.theme.basic';
  
  @Component({
    selector: 'app-root',
    template: '<router-outlet />',
  })
  export class AppComponent {
    private navItems = inject(NavItemsService);
  
    constructor() {
      // Desired order:
      // abp-languages | abp-current-user | abp-full-screen
  
      this.navItems.patchItem(eThemeBasicComponents.Languages, { order: 1 });
      this.navItems.patchItem(eThemeBasicComponents.CurrentUser, { order: 2 });
      this.navItems.patchItem(eThemeBasicComponents.FullScreen, { order: 3 });
    }
  }
  

  That’s the intended way to change ordering without overriding/replacing NavItemsComponent.

  Why the reorder happened

  Most likely due to changes in the theme package defaults (your upgrade from @abp/ng.theme.shared 8.x to 10.4.x). Those packages can adjust built-in nav item definitions (including order), so it’s not necessarily something you did.

  Using older theme versions / FontAwesome 5 instead of 6

  ABP Angular theme packages (and their dependencies like icon sets) are meant to be used in a compatible set with your ABP version. Pinning/downgrading only the theme packages to force older FontAwesome is generally not recommended because it can introduce incompatibilities across ABP Angular packages.

  What you can do safely in ABP is:

  • Keep ABP packages aligned to v10.4.0
  • If you need the old icon look, override icon usage in your own UI/components (or apply CSS overrides), rather than downgrading ABP theme packages.

  If you want to fully control markup/icons, the verified approach is component replacement (replace nav-items / toolbar parts), but for just ordering, NavItemsService.patchItem(...order...) is enough.

  Links:

  • https://abp.io/docs/10.4/framework/ui/angular/modifying-the-menu
  • https://abp.io/docs/10.4/framework/ui/angular/theming
  • https://abp.io/docs/10.4/framework/ui/angular/component-replacement

  ---

  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 3 months ago

  Support Team Fullstack Developer

  Hi,

  The reorder is a default sort behavior change in the framework, not something you did. In v8.x the nav items service sorted strictly by order, so when several items share the same order (the three default items all use 100), Array.sort preserved their insertion order: languages | current-user | full-screen. From v10 the menu service routes through a shared sort function that breaks ties by id alphabetically, and the ids happen to be Theme.CurrentUserComponent < Theme.FullScreenComponent < Theme.LanguagesComponent, so you end up with the new order.

  To restore the previous order without replacing any component, patch the three items via NavItemsService.patchItem:

  import { Component, inject } from '@angular/core';
  import { NavItemsService } from '@abp/ng.theme.shared';
  import { eThemeLeptonComponents } from '@volo/abp.ng.theme.lepton';
  
  @Component({
    selector: 'app-root',
    template: '<router-outlet />',
  })
  export class AppComponent {
    private navItems = inject(NavItemsService);
  
    constructor() {
      this.navItems.patchItem(eThemeLeptonComponents.Languages, { order: 1 });
      this.navItems.patchItem(eThemeLeptonComponents.CurrentUser, { order: 2 });
      this.navItems.patchItem(eThemeLeptonComponents.FullScreen, { order: 3 });
    }
  }
  

  The AppComponent constructor is the easiest place — it runs after the theme registers its default items, so the patches always find them.

  About FontAwesome 5: we don't recommend pinning @abp/ng.theme.shared or @volo/abp.ng.theme.lepton to older versions to keep FA5, because the theme packages are designed to match the framework version and downgrading them breaks compatibility with other ABP Angular packages on 10.4. If you really want the FA5 look, the only safe option is to import FA5 stylesheet into your own styles.scss and override the icon classes used in the affected components with CSS — it's doable but maintenance-heavy and we don't actively support it.

  Thanks

  Markdown supported.

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

  Save Cancel