Bread Crumbs UI

src/app/register-business/register-business.component.html

@@ -4,6 +4,10 @@
     </h2>
 </header>
 
+<section class="bread-crumbs">
+    <span [routerLink]="['/tabs/e-services']"> E-Services </span> / <span class="current-page"> Business Names </span>
+</section>
+
 <div class="search-input-container">
     <ng-container *ngIf="formState === 'CHECK_NAME' || formState === 'INIT_REGISTER'">
         <section class="search-input">

src/styles.scss

@@ -47,4 +47,22 @@ button, a {
         color: var(--primary);
         font-weight: 400;
     }
+}
+
+.bread-crumbs {
+    font-size: 1.4rem;
+    color: var(--dark-grey);
+    margin: 2rem;
+
+    span {
+        color: var(--highlight);
+        font-weight: 300;
+        letter-spacing: 0.5px;
+        cursor: pointer;
+
+        &.current-page {
+            pointer-events: none;
+            color: var(--dark-grey);
+        }
+    }
 }