Modify navbar to include username SUITECRM 8

Alexbmp · 24 April 2026 12:27

Good morning,
I’ve been struggling for days with the code and the configuration options in my SuiteCRM 8.9.0 installation. What I’m trying to do is display the username of the currently logged-in user next to the user icon in the navbar, on the right side of the icon.

Could anyone tell me where this change should be made? I’ve tried working with both legacy and Angular, but I can’t get the username to appear in that part of the navbar.

Thanks in advance.
Best regards,

rsp · 24 April 2026 13:25

You need this code:

<span class="global-user-name">{{ navbar.currentUser.firstName }} {{ navbar.currentUser.lastName }}</span>

github.com/SuiteCRM/SuiteCRM-Core

core/app/core/src/lib/components/navbar/base-navbar/base-navbar.component.html

d122172c0


      
          <ng-container *ngTemplateOutlet="actionIcons"></ng-container>
          <div class="global-links action-dropdown" ngbDropdown>
              <li class="global-link-item">
                  <a #mobileGlobalLinkTitle class="nav-link primary-global-link dropdown-toggle"
                     ngbDropdownToggle>
                      <scrm-image class="global-action-icon sicon-2x" image="user"></scrm-image>
                  </a>
                  <div [style.min-width.px]="mobileGlobalLinkTitle.offsetWidth"
                       aria-labelledby="navbarDropdownMenuLink"
                       class="dropdown-menu global-links-dropdown border shadow-sm-2" ngbDropdownMenu>
                      <span
                          class="global-user-name">{{ navbar.currentUser.firstName }} {{ navbar.currentUser.lastName }}</span>
                      <ng-template [ngIf]="navbar.globalActions">
                          <ng-container
                              *ngFor="let globalAction of navbar.globalActions; let first = first; let last = last;">
                              <a class="dropdown-item global-links-sublink"
                                 href="{{ globalAction.link.url }}"
                                 ngbDropdownItem
                                 target="{{ globalAction.link.target }}">{{ globalAction.link.label }}
                              </a>
                              <hr *ngIf="last === true || first === true"/>

Alexbmp · 27 April 2026 05:16

Good afternoon,

In case this helps anyone, here are the steps I followed to display the username next to the profile icon in the SuiteCRM navbar.

In short, the solution consists of creating a custom JavaScript file that injects the username into the navbar, registering it in angular.json, and rebuilding the Angular frontend so the changes take effect.

The steps were:

Create a backup of the angular.json file.
Create the directory core/app/shell/src/custom/js to store the custom script.
Develop a JS file that waits for the navbar to load and dynamically adds the username next to the icon.
Set the appropriate file permissions.
Modify angular.json to include the script in the scripts section and add the custom folder to assets.
Validate that the JSON is correct.
Rebuild the Angular frontend (yarn build) and clear the SuiteCRM cache.
Set final permissions and verify that the script is included in the generated bundle.

With this approach, the username is correctly displayed next to the avatar in the navbar without modifying the application core.

Thank you all very much for your help.

Best regards,

Alexbmp · 27 April 2026 05:17

Good afternoon,

After reviewing your response, I see that the code you mentioned is already included by default in the template you suggested modifying. However, I believe what you are referring to corresponds to the information displayed when expanding the profile picture menu, as shown in the attached screenshot.

The issue is that I need the username or first name to be displayed directly to the right of the profile picture (as shown in screenshot), rather than inside the dropdown menu.

Thank you very much in advance for your help.

Best regards,

rsp · 27 April 2026 13:45

Could you please share what code you added at this stage?