This is a documentation of how to customize the bootstrap 4 navbar as implemented in dspace 8 angular front-end in the following simple steps.

1. Setup navbar.component.ts of your custom theme
2. Add a constructor and imports
3. Create the ngOnInit method
4. Remove a menu item
5. Add a menu item
6. Add sub-menu/dropdown item(s)

Implement ngOnInit, add a constructor method and all imports as in the base component similar to what is shown below.

Add ngOnInit method inside the class

ngOnInit() {
    super.ngOnInit();
}

Removing a menu item

To remove a menu item from the navbar, use the hideMenuSection method of the menuService as shown below.

this.menuService.hideMenuSection(MenuID.PUBLIC, 'browse_global_communities_and_collections');

Adding a menu item

First create the menu object

const browseJournalsMenu = {
      id: 'browse_journals',
      visible: true,
      active: false,
      model: { type: MenuItemType.LINK, disabled: false, text: 'menu.section.browse_journals', link:'home' },
      index: 0.5,
      shouldPersistOnRouteChange: true,
    };

Then add the menu object to the menuService as shown below

this.menuService.addSection(MenuID.PUBLIC, browseJournalsMenu);

Create as many menu objects as you want then add them to menuService as shown below

Adding a submenu/dropdown

To add a subsection or dropdown menu, create a menu object as previously described then assign it a parentId as shown below.