breadcrumb

src/components/Breadcrumb.vue

+<template>
+  <div class="breadcrumb-container" v-if="crumbs.length > 0">
+    <!-- <b-breadcrumb id="nav-breadcrumb" :items="crumbs" /> -->
+    <b-breadcrumb id="nav-breadcrumb">
+      <b-breadcrumb-item
+        v-for="(crumb, index) in crumbs"
+        :key="index"
+        :active="crumb.active"
+        :to="crumb.to"
+      >
+        <b-icon-chevron-double-right class="mr-2" v-if="index !== 0" />
+        {{ crumb.text }}</b-breadcrumb-item
+      >
+    </b-breadcrumb>
+  </div>
+</template>
+<script>
+const routeMap = {};
+export default {
+  created() {
+    this.$router.options.routes.forEach(route => {
+      routeMap[route.path] =
+        route.meta && route.meta.breadcrumb
+          ? route.meta.breadcrumb
+          : route.name;
+    });
+  },
+  computed: {
+    crumbs() {
+      if (this.$route.path === "/") {
+        return [];
+      }
+
+      const pathArray = this.$route.path.split("/");
+      // remove home route since it's a special case and we'll add it later
+      pathArray.shift();
+
+      let currentPath = "";
+      const breadcrumbs = pathArray.reduce(
+        (breadcrumbArray, path) => {
+          currentPath += "/" + path;
+
+          if (routeMap[currentPath]) {
+            breadcrumbArray.push({
+              path: currentPath,
+              to: currentPath,
+              text: routeMap[currentPath]
+            });
+          }
+          return breadcrumbArray;
+        },
+        // initialize with home route
+        [
+          {
+            path: "",
+            to: "/",
+            text: "Home"
+          }
+        ]
+      );
+
+      breadcrumbs[breadcrumbs.length - 1].active = true;
+
+      return breadcrumbs;
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+.breadcrumb-container {
+  padding-left: 7rem;
+  text-transform: uppercase;
+
+  #nav-breadcrumb {
+    border-radius: 0;
+    margin-bottom: 0;
+    background-color: transparent;
+
+    .breadcrumb-item {
+      &,
+      & > a {
+        color: $p1-light-green;
+      }
+      &.active span {
+        font-weight: 800;
+      }
+      // hide the default >
+      & + .breadcrumb-item::before {
+        display: none;
+      }
+    }
+  }
+}
+</style>

src/components/PageHeader.vue

 <template>
   <div class="page-header">
+    <Breadcrumb />
     <div class="content">
-      <h1 class="title mx-2">
+      <h1 class="title mx-5">
         {{ title }}
       </h1>
       <h4 v-if="subtext" class="subtext mx-lg-auto mx-5">
@@ -22,13 +23,14 @@
 </template>
 
 <script>
+import Breadcrumb from "@/components/Breadcrumb.vue";
 export default {
   props: {
     title: String,
     subtext: String,
     description: String
   },
-  components: {}
+  components: { Breadcrumb }
 };
 </script>
 <style lang="scss" scoped>
@@ -40,9 +42,9 @@ export default {
   background-attachment: fixed;
   overflow: auto;
   margin-bottom: 7rem;
-  margin-top: 98px;
   background-size: cover;
   overflow: hidden;
+  margin-top: 102px;
 
   .title,
   .subtext,
@@ -55,6 +57,17 @@ export default {
       max-width: 50%;
     }
   }
+  @include media-breakpoint-only(lg) {
+    .breadcrumb-container {
+      padding-left: 2.5rem;
+    }
+  }
+
+  @include media-breakpoint-down(md) {
+    .breadcrumb-container {
+      padding-left: 2rem;
+    }
+  }
 
   .content {
     min-height: 400px;