<!-- Basic Example - Footer outside of router outlet-->
<div class="overlay">
  <header class="overlay-header"></header>
  <main class="overlay-body">
    <router-outlet></router-outlet>
  </main>
  <footer class="overlay-footer">
    <div class="overlay-breadcrumb"></div>
    <div class="overlay-btn">Next</div>
  </footer>
</div>

<!-- Second Example - Footer nested in router outlet -->
<div class="overlay">
  <header class="overlay-header"></header>
  <main class="overlay-body">
    <router-outlet>
      <!-- Both would be children of overlay-body -->
      <div class="overlay-body-inner"></overlay-body-inner>
      <footer class="overlay-footer">
        <div class="overlay-breadcrumb"></div>
        <div class="overlay-btn">Next</div>
      </footer>
    </router-outlet>
  </main>
</div>