How to Add a Static Item to the Header Menu in DSpace 9?

[Fábio Malcher Miranda]

Hi,

I'm currently trying to add a new static item to the top menu (header section) in DSpace v9.0. According to the documentation, this could be done by simply adding a new <li> element to the unordered list inside app/navbar/navbar.component.html, like so:

<nav>
  ...
  <div id="collapsingNav" ...>
    <ul class="navbar-nav" ...>
      ...
      <li class="nav-item d-flex align-items-center">
        <div class="text-md-center">
          <a href="http://dspace.org" class="nav-link">DSpace.org</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

However, in version 9.0, the structure of navbar.component.html seems to have changed significantly. Here's what I see now:

<nav [ngClass]="{'open': (menuCollapsed | async) !== true}"
  ...
  <div class="navbar-nav align-items-md-center me-auto shadow-none gapx-3" role="menubar">
    @for (section of (sections | async); track section) {
      <ng-container
        *ngComponentOutlet="(sectionMap$ | async).get(section.id)?.component;
        injector: (sectionMap$ | async).get(section.id)?.injector;">
      </ng-container>
    }
  </div>

Given this new structure, directly adding a <li> tag does not seem to work anymore.

Could you advise on the recommended way to add a static link to the header menu in DSpace 9? Ideally, I would like the item to be always visible, regardless of authentication state.

Best regards,
Fábio

[DSpace Technical Support]

Hi Fábio,

If you are still hitting this issue, here's a few hints.  This menu restructuring occurred in DSpace 8.0 and 7.6.2 in order to fix several major accessibility issues with the header/navbar/admin menus.  See this PR: https://github.com/DSpace/dspace-angular/pull/2858

In order to add custom menu links to that navbar.component.html, I believe you just need to add them now as <a> tags... something like this:

 <div class="navbar-nav align-items-md-center me-auto shadow-none gapx-3" role="menubar">
    @for (section of (sections | async); track section) {
      <ng-container
        *ngComponentOutlet="(sectionMap$ | async).get(section.id)?.component;
        injector: (sectionMap$ | async).get(section.id)?.injector;">
      </ng-container>
    }

          <!-- EXAMPLE CUSTOM HEADER LINK -->

          <a role="menuitem" href="https://dspace.org" class="ds-menu-item">Link to DSpace.org</a>
  </div>

I *believe* that should work (as it's the same structure you see if you now view the HTML source of the header).  But, I admit, I haven't tested it.

Tim