Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  1. Edit your theme's existing app/navbar/navbar.component.html file. This file defines the entire <nav> which displays the navigation header across the entire DSpace site.  While much of the content in this <nav> is loaded dynamically via other Angular components, it is possible to easily add a hardcoded link to the existing header.  Find the section of this <nav> which is the <div role="menubar">, as that's where you'll want to add your new link.  See inline comments in the example below.

    Code Block
    titlenavbar.component.html
    <!-- The header links are all embedded under the role="menubar" div tag --> 
    <div role="menubar" class="navbar-nav" ... >   
        ...
        <!-- Add your new link at the end (or beginning) of this ULDIV tag in a new LIDIV tag -->
        <!-- NOTE: All classes used below are the same Bootstrap CSS classes used by our 'dspace' and 'custom' themes. 
             You can modify them if the link doesn't look correct in your theme. -->
        <div class="ds-menu-item-wrapper text-md-center">
          <a role="menuitem" href="http://dspace.org" class="ds-menu-item">DSpace.org</a>
        </div>
    </div>


  2. Obviously, you can also make additional modifications to the HTML of the header in this file, as necessary for your navigation header.  Keep in mind though that anything you remove may impact the dynamic content that is pulled into this navigation header. 
    1. An example is that the header logo for the "dspace" theme also exists in this same file. 
  3. Any changes require rebuilding your UI. If you are running in "dev mode" (npm run start:dev), then the UI will restart automatically whenever changes are detected.

...