diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts
index c092362c7e6..3f2dc45ce7d 100644
--- a/src/app/app.component.spec.ts
+++ b/src/app/app.component.spec.ts
@@ -35,6 +35,7 @@ import { provideMockStore } from '@ngrx/store/testing';
 import { GoogleAnalyticsService } from './statistics/google-analytics.service';
 import { ThemeService } from './shared/theme-support/theme.service';
 import { getMockThemeService } from './shared/mocks/theme-service.mock';
+import { BreadcrumbsService } from './breadcrumbs/breadcrumbs.service';
 
 let comp: AppComponent;
 let fixture: ComponentFixture<AppComponent>;
@@ -45,47 +46,54 @@ const initialState = {
 
 describe('App component', () => {
 
+  let breadcrumbsServiceSpy;
+
   function getMockLocaleService(): LocaleService {
     return jasmine.createSpyObj('LocaleService', {
       setCurrentLanguageCode: jasmine.createSpy('setCurrentLanguageCode')
     });
   }
 
-  const defaultTestBedConf = {
-    imports: [
-      CommonModule,
-      StoreModule.forRoot(authReducer, storeModuleConfig),
-      TranslateModule.forRoot({
-        loader: {
-          provide: TranslateLoader,
-          useClass: TranslateLoaderMock
-        }
-      }),
-    ],
-    declarations: [AppComponent], // declare the test component
-    providers: [
-      { provide: NativeWindowService, useValue: new NativeWindowRef() },
-      { provide: MetadataService, useValue: new MetadataServiceMock() },
-      { provide: Angulartics2GoogleAnalytics, useValue: new AngularticsProviderMock() },
-      { provide: Angulartics2DSpace, useValue: new AngularticsProviderMock() },
-      { provide: AuthService, useValue: new AuthServiceMock() },
-      { provide: Router, useValue: new RouterMock() },
-      { provide: ActivatedRoute, useValue: new MockActivatedRoute() },
-      { provide: MenuService, useValue: menuService },
-      { provide: CSSVariableService, useClass: CSSVariableServiceStub },
-      { provide: HostWindowService, useValue: new HostWindowServiceStub(800) },
-      { provide: LocaleService, useValue: getMockLocaleService() },
-      { provide: ThemeService, useValue: getMockThemeService() },
-      provideMockStore({ initialState }),
-      AppComponent,
-      RouteService
-    ],
-    schemas: [CUSTOM_ELEMENTS_SCHEMA]
+  const getDefaultTestBedConf = () => {
+    breadcrumbsServiceSpy = jasmine.createSpyObj(['listenForRouteChanges']);
+
+    return {
+      imports: [
+        CommonModule,
+        StoreModule.forRoot(authReducer, storeModuleConfig),
+        TranslateModule.forRoot({
+          loader: {
+            provide: TranslateLoader,
+            useClass: TranslateLoaderMock
+          }
+        }),
+      ],
+      declarations: [AppComponent], // declare the test component
+      providers: [
+        { provide: NativeWindowService, useValue: new NativeWindowRef() },
+        { provide: MetadataService, useValue: new MetadataServiceMock() },
+        { provide: Angulartics2GoogleAnalytics, useValue: new AngularticsProviderMock() },
+        { provide: Angulartics2DSpace, useValue: new AngularticsProviderMock() },
+        { provide: AuthService, useValue: new AuthServiceMock() },
+        { provide: Router, useValue: new RouterMock() },
+        { provide: ActivatedRoute, useValue: new MockActivatedRoute() },
+        { provide: MenuService, useValue: menuService },
+        { provide: CSSVariableService, useClass: CSSVariableServiceStub },
+        { provide: HostWindowService, useValue: new HostWindowServiceStub(800) },
+        { provide: LocaleService, useValue: getMockLocaleService() },
+        { provide: ThemeService, useValue: getMockThemeService() },
+        { provide: BreadcrumbsService, useValue: breadcrumbsServiceSpy },
+        provideMockStore({ initialState }),
+        AppComponent,
+        RouteService
+      ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA]
+    };
   };
 
   // waitForAsync beforeEach
   beforeEach(waitForAsync(() => {
-    return TestBed.configureTestingModule(defaultTestBedConf);
+    return TestBed.configureTestingModule(getDefaultTestBedConf());
   }));
 
   // synchronous beforeEach
@@ -120,13 +128,19 @@ describe('App component', () => {
 
   });
 
+  describe('the constructor', () => {
+    it('should call breadcrumbsService.listenForRouteChanges', () => {
+      expect(breadcrumbsServiceSpy.listenForRouteChanges).toHaveBeenCalledTimes(1);
+    });
+  });
+
   describe('when GoogleAnalyticsService is provided', () => {
     let googleAnalyticsSpy;
 
     beforeEach(() => {
       // NOTE: Cannot override providers once components have been compiled, so TestBed needs to be reset
       TestBed.resetTestingModule();
-      TestBed.configureTestingModule(defaultTestBedConf);
+      TestBed.configureTestingModule(getDefaultTestBedConf());
       googleAnalyticsSpy = jasmine.createSpyObj('googleAnalyticsService', [
         'addTrackingIdToPage',
       ]);
@@ -154,7 +168,7 @@ describe('App component', () => {
     beforeEach(() => {
       // NOTE: Cannot override providers once components have been compiled, so TestBed needs to be reset
       TestBed.resetTestingModule();
-      TestBed.configureTestingModule(defaultTestBedConf);
+      TestBed.configureTestingModule(getDefaultTestBedConf());
       TestBed.overrideProvider(ThemeService, {useValue: getMockThemeService('custom')});
       document = TestBed.inject(DOCUMENT);
       headSpy = jasmine.createSpyObj('head', ['appendChild']);
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 8a38d14fe30..a596ba56cd4 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -36,6 +36,7 @@ import { DOCUMENT } from '@angular/common';
 import { ThemeService } from './shared/theme-support/theme.service';
 import { BASE_THEME_NAME } from './shared/theme-support/theme.constants';
 import { DEFAULT_THEME_CONFIG } from './shared/theme-support/theme.effects';
+import { BreadcrumbsService } from './breadcrumbs/breadcrumbs.service';
 
 @Component({
   selector: 'ds-app',
@@ -73,6 +74,7 @@ export class AppComponent implements OnInit, AfterViewInit {
     private menuService: MenuService,
     private windowService: HostWindowService,
     private localeService: LocaleService,
+    private breadcrumbsService: BreadcrumbsService,
     @Optional() private cookiesService: KlaroService,
     @Optional() private googleAnalyticsService: GoogleAnalyticsService,
   ) {
@@ -106,6 +108,7 @@ export class AppComponent implements OnInit, AfterViewInit {
     angulartics2DSpace.startTracking();
 
     metadata.listenForRouteChange();
+    breadcrumbsService.listenForRouteChanges();
 
     if (environment.debug) {
       console.info(environment);
diff --git a/src/app/breadcrumbs/breadcrumb/breadcrumb-config.model.ts b/src/app/breadcrumbs/breadcrumb/breadcrumb-config.model.ts
index 0ff8fc5033b..cc9277ee50b 100644
--- a/src/app/breadcrumbs/breadcrumb/breadcrumb-config.model.ts
+++ b/src/app/breadcrumbs/breadcrumb/breadcrumb-config.model.ts
@@ -1,4 +1,4 @@
-import { BreadcrumbsService } from '../../core/breadcrumbs/breadcrumbs.service';
+import { BreadcrumbsProviderService } from '../../core/breadcrumbs/breadcrumbsProviderService';
 
 /**
  * Interface for breadcrumb configuration objects
@@ -7,7 +7,7 @@ export interface BreadcrumbConfig<T> {
     /**
      * The service used to calculate the breadcrumb object
      */
-    provider: BreadcrumbsService<T>;
+    provider: BreadcrumbsProviderService<T>;
 
     /**
      * The key that is used to calculate the breadcrumb display value
diff --git a/src/app/breadcrumbs/breadcrumbs.component.html b/src/app/breadcrumbs/breadcrumbs.component.html
index 1f142526e27..a6072ed58a6 100644
--- a/src/app/breadcrumbs/breadcrumbs.component.html
+++ b/src/app/breadcrumbs/breadcrumbs.component.html
@@ -1,5 +1,5 @@
 <ng-container *ngVar="(breadcrumbs$ | async) as breadcrumbs">
-    <nav *ngIf="showBreadcrumbs" aria-label="breadcrumb">
+    <nav *ngIf="(showBreadcrumbs$ | async)" aria-label="breadcrumb">
         <ol class="breadcrumb">
             <ng-container
                     *ngTemplateOutlet="breadcrumbs?.length > 0 ? breadcrumb : activeBreadcrumb; context: {text: 'home.breadcrumbs', url: '/'}"></ng-container>
diff --git a/src/app/breadcrumbs/breadcrumbs.component.spec.ts b/src/app/breadcrumbs/breadcrumbs.component.spec.ts
index f7f8789144f..dd08a74f239 100644
--- a/src/app/breadcrumbs/breadcrumbs.component.spec.ts
+++ b/src/app/breadcrumbs/breadcrumbs.component.spec.ts
@@ -1,115 +1,78 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { BreadcrumbsComponent } from './breadcrumbs.component';
-import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
-import { Observable, of as observableOf } from 'rxjs';
-import { RouterTestingModule } from '@angular/router/testing';
-import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
-import { TranslateLoaderMock } from '../shared/testing/translate-loader.mock';
-import { BreadcrumbConfig } from './breadcrumb/breadcrumb-config.model';
-import { BreadcrumbsService } from '../core/breadcrumbs/breadcrumbs.service';
+import { BreadcrumbsService } from './breadcrumbs.service';
 import { Breadcrumb } from './breadcrumb/breadcrumb.model';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
-import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { VarDirective } from '../shared/utils/var.directive';
-import { getTestScheduler } from 'jasmine-marbles';
-
-class TestBreadcrumbsService implements BreadcrumbsService<string> {
-  getBreadcrumbs(key: string, url: string): Observable<Breadcrumb[]> {
-    return observableOf([new Breadcrumb(key, url)]);
-  }
-}
+import { By } from '@angular/platform-browser';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { TranslateLoaderMock } from '../shared/testing/translate-loader.mock';
+import { RouterTestingModule } from '@angular/router/testing';
+import { of as observableOf } from 'rxjs/internal/observable/of';
+import { DebugElement } from '@angular/core';
 
 describe('BreadcrumbsComponent', () => {
   let component: BreadcrumbsComponent;
   let fixture: ComponentFixture<BreadcrumbsComponent>;
-  let router: any;
-  let route: any;
-  let breadcrumbProvider;
-  let breadcrumbConfigA: BreadcrumbConfig<string>;
-  let breadcrumbConfigB: BreadcrumbConfig<string>;
-  let expectedBreadcrumbs;
-
-  function init() {
-    breadcrumbProvider = new TestBreadcrumbsService();
+  let breadcrumbsServiceMock: BreadcrumbsService;
 
-    breadcrumbConfigA = { provider: breadcrumbProvider, key: 'example.path', url: 'example.com' };
-    breadcrumbConfigB = { provider: breadcrumbProvider, key: 'another.path', url: 'another.com' };
-
-    route = {
-      root: {
-        snapshot: {
-          data: { breadcrumb: breadcrumbConfigA },
-          routeConfig: { resolve: { breadcrumb: {} } }
-        },
-        firstChild: {
-          snapshot: {
-            // Example without resolver should be ignored
-            data: { breadcrumb: breadcrumbConfigA },
-          },
-          firstChild: {
-            snapshot: {
-              data: { breadcrumb: breadcrumbConfigB },
-              routeConfig: { resolve: { breadcrumb: {} } }
-            }
-          }
-        }
-      }
-    };
+  const expectBreadcrumb = (listItem: DebugElement, text: string, url: string) => {
+    const anchor = listItem.query(By.css('a'));
 
-    expectedBreadcrumbs = [
-      new Breadcrumb(breadcrumbConfigA.key, breadcrumbConfigA.url),
-      new Breadcrumb(breadcrumbConfigB.key, breadcrumbConfigB.url)
-    ];
-
-  }
+    if (url == null) {
+      expect(anchor).toBeNull();
+      expect(listItem.nativeElement.innerHTML).toEqual(text);
+    } else {
+      expect(anchor).toBeInstanceOf(DebugElement);
+      expect(anchor.attributes.href).toEqual(url);
+      expect(anchor.nativeElement.innerHTML).toEqual(text);
+    }
+  };
 
   beforeEach(waitForAsync(() => {
-    init();
+    breadcrumbsServiceMock = {
+      breadcrumbs$: observableOf([
+        // NOTE: a root breadcrumb is automatically rendered
+        new Breadcrumb('bc 1', 'example.com'),
+        new Breadcrumb('bc 2', 'another.com'),
+      ]),
+      showBreadcrumbs$: observableOf(true),
+    } as BreadcrumbsService;
+
     TestBed.configureTestingModule({
-      declarations: [BreadcrumbsComponent, VarDirective],
-      imports: [RouterTestingModule.withRoutes([]), TranslateModule.forRoot({
-        loader: {
-          provide: TranslateLoader,
-          useClass: TranslateLoaderMock
-        }
-      }), NgbModule],
+      declarations: [
+        BreadcrumbsComponent,
+        VarDirective,
+      ],
+      imports: [
+        RouterTestingModule.withRoutes([]),
+        TranslateModule.forRoot({
+          loader: {
+            provide: TranslateLoader,
+            useClass: TranslateLoaderMock,
+          }
+        }),
+      ],
       providers: [
-        {provide: ActivatedRoute, useValue: route}
-      ], schemas: [NO_ERRORS_SCHEMA]
-    })
-      .compileComponents();
-  }));
+        { provide: BreadcrumbsService, useValue: breadcrumbsServiceMock },
+      ],
+    }).compileComponents();
 
-  beforeEach(() => {
     fixture = TestBed.createComponent(BreadcrumbsComponent);
     component = fixture.componentInstance;
-    router = TestBed.inject(Router);
     fixture.detectChanges();
-  });
+  }));
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
 
-  describe('ngOnInit', () => {
-    beforeEach(() => {
-      spyOn(component, 'resolveBreadcrumbs').and.returnValue(observableOf([]));
-    });
-
-    it('should call resolveBreadcrumb on init', () => {
-      router.events = observableOf(new NavigationEnd(0, '', ''));
-      component.ngOnInit();
-      fixture.detectChanges();
-
-      expect(component.resolveBreadcrumbs).toHaveBeenCalledWith(route.root);
-    });
+  it('should render the breadcrumbs', () => {
+    const breadcrumbs = fixture.debugElement.queryAll(By.css('.breadcrumb-item'));
+    expect(breadcrumbs.length).toBe(3);
+    expectBreadcrumb(breadcrumbs[0], 'home.breadcrumbs', '/');
+    expectBreadcrumb(breadcrumbs[1], 'bc 1', '/example.com');
+    expectBreadcrumb(breadcrumbs[2], 'bc 2', null);
   });
 
-  describe('resolveBreadcrumbs', () => {
-    it('should return the correct breadcrumbs', () => {
-      const breadcrumbs = component.resolveBreadcrumbs(route.root);
-      getTestScheduler().expectObservable(breadcrumbs).toBe('(a|)', { a: expectedBreadcrumbs });
-    });
-  });
 });
diff --git a/src/app/breadcrumbs/breadcrumbs.component.ts b/src/app/breadcrumbs/breadcrumbs.component.ts
index 234720d5cad..488fd37a2c6 100644
--- a/src/app/breadcrumbs/breadcrumbs.component.ts
+++ b/src/app/breadcrumbs/breadcrumbs.component.ts
@@ -1,9 +1,7 @@
-import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
+import { Component } from '@angular/core';
 import { Breadcrumb } from './breadcrumb/breadcrumb.model';
-import { hasNoValue, hasValue, isUndefined } from '../shared/empty.util';
-import { filter, map, switchMap, tap } from 'rxjs/operators';
-import { combineLatest, Observable, of as observableOf } from 'rxjs';
+import { BreadcrumbsService } from './breadcrumbs.service';
+import { Observable } from 'rxjs/internal/Observable';
 
 /**
  * Component representing the breadcrumbs of a page
@@ -13,7 +11,8 @@ import { combineLatest, Observable, of as observableOf } from 'rxjs';
   templateUrl: './breadcrumbs.component.html',
   styleUrls: ['./breadcrumbs.component.scss']
 })
-export class BreadcrumbsComponent implements OnInit {
+export class BreadcrumbsComponent {
+
   /**
    * Observable of the list of breadcrumbs for this page
    */
@@ -22,61 +21,13 @@ export class BreadcrumbsComponent implements OnInit {
   /**
    * Whether or not to show breadcrumbs on this page
    */
-  showBreadcrumbs: boolean;
+  showBreadcrumbs$: Observable<boolean>;
 
   constructor(
-    private route: ActivatedRoute,
-    private router: Router
+    private breadcrumbsService: BreadcrumbsService,
   ) {
+    this.breadcrumbs$ = breadcrumbsService.breadcrumbs$;
+    this.showBreadcrumbs$ = breadcrumbsService.showBreadcrumbs$;
   }
 
-  /**
-   * Sets the breadcrumbs on init for this page
-   */
-  ngOnInit(): void {
-    this.breadcrumbs$ = this.router.events.pipe(
-      filter((e): e is NavigationEnd => e instanceof NavigationEnd),
-      tap(() => this.reset()),
-      switchMap(() => this.resolveBreadcrumbs(this.route.root)),
-    );
-  }
-
-  /**
-   * Method that recursively resolves breadcrumbs
-   * @param route The route to get the breadcrumb from
-   */
-  resolveBreadcrumbs(route: ActivatedRoute): Observable<Breadcrumb[]> {
-    const data = route.snapshot.data;
-    const routeConfig = route.snapshot.routeConfig;
-
-    const last: boolean = hasNoValue(route.firstChild);
-    if (last) {
-      if (hasValue(data.showBreadcrumbs)) {
-        this.showBreadcrumbs = data.showBreadcrumbs;
-      } else if (isUndefined(data.breadcrumb)) {
-        this.showBreadcrumbs = false;
-      }
-    }
-
-    if (
-      hasValue(data) && hasValue(data.breadcrumb) &&
-      hasValue(routeConfig) && hasValue(routeConfig.resolve) && hasValue(routeConfig.resolve.breadcrumb)
-    ) {
-      const { provider, key, url } = data.breadcrumb;
-      if (!last) {
-        return combineLatest(provider.getBreadcrumbs(key, url), this.resolveBreadcrumbs(route.firstChild))
-          .pipe(map((crumbs) => [].concat.apply([], crumbs)));
-      } else {
-        return provider.getBreadcrumbs(key, url);
-      }
-    }
-    return !last ? this.resolveBreadcrumbs(route.firstChild) : observableOf([]);
-  }
-
-  /**
-   * Resets the state of the breadcrumbs
-   */
-  reset() {
-    this.showBreadcrumbs = true;
-  }
 }
diff --git a/src/app/breadcrumbs/breadcrumbs.service.spec.ts b/src/app/breadcrumbs/breadcrumbs.service.spec.ts
new file mode 100644
index 00000000000..11b8bace398
--- /dev/null
+++ b/src/app/breadcrumbs/breadcrumbs.service.spec.ts
@@ -0,0 +1,171 @@
+import { TestBed } from '@angular/core/testing';
+
+import { BreadcrumbsService } from './breadcrumbs.service';
+import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
+import { Observable, of as observableOf, Subject } from 'rxjs';
+import { BreadcrumbConfig } from './breadcrumb/breadcrumb-config.model';
+import { BreadcrumbsProviderService } from '../core/breadcrumbs/breadcrumbsProviderService';
+import { Breadcrumb } from './breadcrumb/breadcrumb.model';
+import { cold } from 'jasmine-marbles';
+
+class TestBreadcrumbsService implements BreadcrumbsProviderService<string> {
+  getBreadcrumbs(key: string, url: string): Observable<Breadcrumb[]> {
+    return observableOf([new Breadcrumb(key, url)]);
+  }
+}
+
+describe('BreadcrumbsService', () => {
+  let service: BreadcrumbsService;
+  let routerEventsObs: Subject<any>;
+  let routerMock: Router;
+  let activatedRouteMock: Partial<ActivatedRoute>;
+  let currentRootRoute: Partial<ActivatedRoute>;
+  let breadcrumbProvider;
+  let breadcrumbConfigA: BreadcrumbConfig<string>;
+  let breadcrumbConfigB: BreadcrumbConfig<string>;
+
+  /**
+   * Init breadcrumb variables, see beforeEach
+   */
+  const initBreadcrumbs = () => {
+    breadcrumbProvider = new TestBreadcrumbsService();
+    breadcrumbConfigA = { provider: breadcrumbProvider, key: 'example.path', url: 'example.com' };
+    breadcrumbConfigB = { provider: breadcrumbProvider, key: 'another.path', url: 'another.com' };
+  };
+
+  const changeActivatedRoute = (newRootRoute: any) => {
+    // update the ActivatedRoute that the service will receive
+    currentRootRoute = newRootRoute;
+
+    // the pipeline of BreadcrumbsService#listenForRouteChanges needs a NavigationEnd event,
+    // but the actual payload does not matter, since ActivatedRoute is mocked too.
+    routerEventsObs.next(new NavigationEnd(0, '', ''));
+  };
+
+  beforeEach(() => {
+    initBreadcrumbs();
+
+    routerEventsObs = new Subject<any>();
+
+    // BreadcrumbsService uses Router#events
+    routerMock = jasmine.createSpyObj([], {
+      events: routerEventsObs,
+    });
+
+    // BreadcrumbsService uses ActivatedRoute#root
+    activatedRouteMock = {
+      get root() {
+        return currentRootRoute as ActivatedRoute;
+      },
+    };
+
+    TestBed.configureTestingModule({
+      providers: [
+        { provide: Router, useValue: routerMock },
+        { provide: ActivatedRoute, useValue: activatedRouteMock },
+      ],
+    });
+    service = TestBed.inject(BreadcrumbsService);
+
+    // this is done by AppComponent under regular circumstances
+    service.listenForRouteChanges();
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+
+  describe('breadcrumbs$', () => {
+    it('should return a breadcrumb corresponding to the current route', () => {
+      const route1 = {
+        snapshot: {
+          data: { breadcrumb: breadcrumbConfigA },
+          routeConfig: { resolve: { breadcrumb: {} } }
+        }
+      };
+
+      const expectation1 = [
+        new Breadcrumb(breadcrumbConfigA.key, breadcrumbConfigA.url),
+      ];
+
+      changeActivatedRoute(route1);
+      expect(service.breadcrumbs$).toBeObservable(cold('a', { a: expectation1 }));
+
+      const route2 = {
+        snapshot: {
+          data: { breadcrumb: breadcrumbConfigA },
+          routeConfig: { resolve: { breadcrumb: {} } }
+        },
+        firstChild: {
+          snapshot: {
+            // Example without resolver should be ignored
+            data: { breadcrumb: breadcrumbConfigA },
+          },
+          firstChild: {
+            snapshot: {
+              data: { breadcrumb: breadcrumbConfigB },
+              routeConfig: { resolve: { breadcrumb: {} } }
+            }
+          }
+        }
+      };
+
+      const expectation2 = [
+        new Breadcrumb(breadcrumbConfigA.key, breadcrumbConfigA.url),
+        new Breadcrumb(breadcrumbConfigB.key, breadcrumbConfigB.url),
+      ];
+
+      changeActivatedRoute(route2);
+      expect(service.breadcrumbs$).toBeObservable(cold('a', { a: expectation2 }));
+    });
+  });
+
+  describe('showBreadcrumbs$', () => {
+    describe('when the last part of the route has showBreadcrumbs in its data', () => {
+      it('should return that value', () => {
+        const route1 = {
+          snapshot: {
+            data: {
+              breadcrumb: breadcrumbConfigA,
+              showBreadcrumbs: false, // explicitly hide breadcrumbs
+            },
+            routeConfig: { resolve: { breadcrumb: {} } }
+          }
+        };
+
+        changeActivatedRoute(route1);
+        expect(service.showBreadcrumbs$).toBeObservable(cold('a', { a: false }));
+
+        const route2 = {
+          snapshot: {
+            data: {
+              breadcrumb: breadcrumbConfigA,
+              showBreadcrumbs: true, // explicitly show breadcrumbs
+            },
+            routeConfig: { resolve: { breadcrumb: {} } }
+          }
+        };
+
+        changeActivatedRoute(route2);
+        expect(service.showBreadcrumbs$).toBeObservable(cold('a', { a: true }));
+      });
+    });
+
+    describe('when the last part of the route has no breadcrumb in its data', () => {
+      it('should return false', () => {
+        const route1 = {
+          snapshot: {
+            data: {
+              // no breadcrumbs set - always hide
+            },
+            routeConfig: { resolve: { breadcrumb: {} } }
+          }
+        };
+
+        changeActivatedRoute(route1);
+        expect(service.showBreadcrumbs$).toBeObservable(cold('a', { a: false }));
+      });
+    });
+  });
+
+});
diff --git a/src/app/breadcrumbs/breadcrumbs.service.ts b/src/app/breadcrumbs/breadcrumbs.service.ts
new file mode 100644
index 00000000000..a7be030c12d
--- /dev/null
+++ b/src/app/breadcrumbs/breadcrumbs.service.ts
@@ -0,0 +1,80 @@
+import { Injectable } from '@angular/core';
+import {combineLatest, Observable, of as observableOf, ReplaySubject} from 'rxjs';
+import {Breadcrumb} from './breadcrumb/breadcrumb.model';
+import {ActivatedRoute, NavigationEnd, Router} from '@angular/router';
+import {filter, map, switchMap, tap} from 'rxjs/operators';
+import {hasNoValue, hasValue, isUndefined} from '../shared/empty.util';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class BreadcrumbsService {
+
+  /**
+   * Observable of the list of breadcrumbs for this page
+   */
+  breadcrumbs$: ReplaySubject<Breadcrumb[]> = new ReplaySubject(1);
+
+  /**
+   * Whether or not to show breadcrumbs on this page
+   */
+  showBreadcrumbs$: ReplaySubject<boolean> = new ReplaySubject(1);
+
+  constructor(
+    private route: ActivatedRoute,
+    private router: Router,
+  ) {}
+
+  /**
+   * Called by {@link AppComponent#constructor} (i.e. before routing)
+   * such that no routing events are missed.
+   */
+  listenForRouteChanges() {
+    // supply events to this.breadcrumbs$
+    this.router.events.pipe(
+      filter((e): e is NavigationEnd => e instanceof NavigationEnd),
+      tap(() => this.reset()),
+      switchMap(() => this.resolveBreadcrumbs(this.route.root)),
+    ).subscribe(this.breadcrumbs$);
+  }
+
+  /**
+   * Method that recursively resolves breadcrumbs
+   * @param route The route to get the breadcrumb from
+   */
+  private resolveBreadcrumbs(route: ActivatedRoute): Observable<Breadcrumb[]> {
+    const data = route.snapshot.data;
+    const routeConfig = route.snapshot.routeConfig;
+
+    const last: boolean = hasNoValue(route.firstChild);
+    if (last) {
+      if (hasValue(data.showBreadcrumbs)) {
+        this.showBreadcrumbs$.next(data.showBreadcrumbs);
+      } else if (isUndefined(data.breadcrumb)) {
+        this.showBreadcrumbs$.next(false);
+      }
+    }
+
+    if (
+      hasValue(data) && hasValue(data.breadcrumb) &&
+      hasValue(routeConfig) && hasValue(routeConfig.resolve) && hasValue(routeConfig.resolve.breadcrumb)
+    ) {
+      const { provider, key, url } = data.breadcrumb;
+      if (!last) {
+        return combineLatest(provider.getBreadcrumbs(key, url), this.resolveBreadcrumbs(route.firstChild))
+          .pipe(map((crumbs) => [].concat.apply([], crumbs)));
+      } else {
+        return provider.getBreadcrumbs(key, url);
+      }
+    }
+    return !last ? this.resolveBreadcrumbs(route.firstChild) : observableOf([]);
+  }
+
+  /**
+   * Resets the state of the breadcrumbs
+   */
+  private reset() {
+    this.showBreadcrumbs$.next(true);
+  }
+
+}
diff --git a/src/app/core/breadcrumbs/breadcrumbs.service.ts b/src/app/core/breadcrumbs/breadcrumbsProviderService.ts
similarity index 90%
rename from src/app/core/breadcrumbs/breadcrumbs.service.ts
rename to src/app/core/breadcrumbs/breadcrumbsProviderService.ts
index f274485d5df..4f5dd0a5838 100644
--- a/src/app/core/breadcrumbs/breadcrumbs.service.ts
+++ b/src/app/core/breadcrumbs/breadcrumbsProviderService.ts
@@ -4,7 +4,7 @@ import { Observable } from 'rxjs';
 /**
  * Service to calculate breadcrumbs for a single part of the route
  */
-export interface BreadcrumbsService<T> {
+export interface BreadcrumbsProviderService<T> {
 
   /**
    * Method to calculate the breadcrumbs for a part of the route
diff --git a/src/app/core/breadcrumbs/dso-breadcrumbs.service.ts b/src/app/core/breadcrumbs/dso-breadcrumbs.service.ts
index f822a953a88..23fff185372 100644
--- a/src/app/core/breadcrumbs/dso-breadcrumbs.service.ts
+++ b/src/app/core/breadcrumbs/dso-breadcrumbs.service.ts
@@ -1,5 +1,5 @@
 import { Breadcrumb } from '../../breadcrumbs/breadcrumb/breadcrumb.model';
-import { BreadcrumbsService } from './breadcrumbs.service';
+import { BreadcrumbsProviderService } from './breadcrumbsProviderService';
 import { DSONameService } from './dso-name.service';
 import { Observable, of as observableOf } from 'rxjs';
 import { ChildHALResource } from '../shared/child-hal-resource.model';
@@ -18,7 +18,7 @@ import { getDSORoute } from '../../app-routing-paths';
 @Injectable({
   providedIn: 'root'
 })
-export class DSOBreadcrumbsService implements BreadcrumbsService<ChildHALResource & DSpaceObject> {
+export class DSOBreadcrumbsService implements BreadcrumbsProviderService<ChildHALResource & DSpaceObject> {
   constructor(
     private linkService: LinkService,
     private dsoNameService: DSONameService
diff --git a/src/app/core/breadcrumbs/i18n-breadcrumbs.service.ts b/src/app/core/breadcrumbs/i18n-breadcrumbs.service.ts
index b774b58126a..15563bdde8e 100644
--- a/src/app/core/breadcrumbs/i18n-breadcrumbs.service.ts
+++ b/src/app/core/breadcrumbs/i18n-breadcrumbs.service.ts
@@ -1,5 +1,5 @@
 import { Breadcrumb } from '../../breadcrumbs/breadcrumb/breadcrumb.model';
-import { BreadcrumbsService } from './breadcrumbs.service';
+import { BreadcrumbsProviderService } from './breadcrumbsProviderService';
 import { Observable, of as observableOf } from 'rxjs';
 import { Injectable } from '@angular/core';
 
@@ -14,7 +14,7 @@ export const BREADCRUMB_MESSAGE_POSTFIX = '.breadcrumbs';
 @Injectable({
   providedIn: 'root'
 })
-export class I18nBreadcrumbsService implements BreadcrumbsService<string> {
+export class I18nBreadcrumbsService implements BreadcrumbsProviderService<string> {
 
   /**
    * Method to calculate the breadcrumbs
diff --git a/src/app/process-page/process-breadcrumbs.service.ts b/src/app/process-page/process-breadcrumbs.service.ts
index ffd289e04ef..26b0787a536 100644
--- a/src/app/process-page/process-breadcrumbs.service.ts
+++ b/src/app/process-page/process-breadcrumbs.service.ts
@@ -1,6 +1,6 @@
 import { Observable, of as observableOf } from 'rxjs';
 import { Injectable } from '@angular/core';
-import { BreadcrumbsService } from '../core/breadcrumbs/breadcrumbs.service';
+import { BreadcrumbsProviderService } from '../core/breadcrumbs/breadcrumbsProviderService';
 import { Breadcrumb } from '../breadcrumbs/breadcrumb/breadcrumb.model';
 import { Process } from './processes/process.model';
 
@@ -8,7 +8,7 @@ import { Process } from './processes/process.model';
  * Service to calculate process breadcrumbs for a single part of the route
  */
 @Injectable()
-export class ProcessBreadcrumbsService implements BreadcrumbsService<Process> {
+export class ProcessBreadcrumbsService implements BreadcrumbsProviderService<Process> {
 
   /**
    * Method to calculate the breadcrumbs