DSpace 7.4 - Adding a bunch of components to a dropdown in the navbar + breadcrumbs

[Lachlan Eavestaff]

Hi all,

I am fairly new to Angular, and have started to familiarize myself with the process as my university moves on from DSpace 5 to DSpace 7.4. I believe I have a somewhat alright understanding now of how to build a component for use in DSpace.

What I am aiming to achieve is moving some static pages from our instances of DSpace 5 (pages with mainly text), over to the new DSpace 7 front-end with dynamic pages. I am building custom components for each page, with the new content being held in the html/scss and the dynamic items being the header, breadcrumbs, and footer. The theming is based off of the DSpace theme.

Now while I am able to access a page from its url (in this case /content-policy), and I have managed to add a singular page to the navbar like in the image attached. The problem is I want this to be a drop-down menu, with all the new component pages linked underneath.

<div id="collapsingNav" class="w-100 h-100">
      <ul class="navbar-nav navbar-navigation me-auto mb-2 mb-lg-0 h-100 d-flex align-items-center">
        <ng-container *ngFor="let section of (sections | async)">
          <ng-container *ngComponentOutlet="(sectionMap$ | async).get(section.id)?.component; injector: (sectionMap$ | async).get(section.id)?.injector;"></ng-container>
        </ng-container>

        <a class="nav-item nav-link" routerLink="/content-policy">
            Content Policy
        </a>

      </ul>

    </div>

I noted the component expandable-navbar-section, but I can't seem to get my head around how I get these new pages to be added to the navbar as a dropdown. I am not familiar with ng-containers. Along with the navbar constraints, I am not seeing the breadcrumbs for this new component/page either. Any help with this would be much appreciated, so I can continue to progress through the process of upgrading. 

Thanks, 
Lachlan Eavestaff