Breadcrumb devsite

web/site/app/app.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { SbcHeaderMain, SbcFooter } from '#components'
+import { SbcHeaderMain, SbcFooter, SbcBreadcrumb } from '#components'
 const { locale } = useI18n()
 const localePath = useLocalePath()
 // const user = useCurrentUser()
@@ -83,6 +83,7 @@ provide('footerHeight', footerHeight)
         $route.path.includes('dashboard') ? dashboardNavItems : undefined
       "
     />
+    <SbcBreadcrumb class="sticky inset-x-0 top-16 z-40" />
     <NuxtLayout>
       <NuxtPage />
     </NuxtLayout>

web/site/app/components/Sbc/Breadcrumb.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import type { BreadcrumbLink } from '#ui/types'
+const { t } = useI18n()
+const route = useRoute()
+
+const breadcrumbs = computed<BreadcrumbLink[]>(() =>
+  route.meta.breadcrumbs || [{ label: t('sbcBreadcrumb.default') }]
+)
+
+const resolveBackHref = computed(() => {
+  const bc = breadcrumbs.value
+  return bc.length > 1 ? bc[bc.length - 2]?.to || bc[bc.length - 2]?.href : ''
+})
+
+const isBackButtonDisabled = computed(() => breadcrumbs.value.length <= 2)
+
+</script>
+<template>
+  <div class="2xl: left-1 bg-bcGovColor-nonClickable sm:px-4">
+    <div class="m-auto flex w-full max-w-[1312px] items-center justify-between">
+      <div class="flex h-10 min-h-10 items-center">
+        <UButton
+          class="mr-3 mt-px size-[28px] rounded-full px-1 text-blue-500"
+          color="white"
+          :disabled="isBackButtonDisabled"
+          icon="i-mdi-arrow-left"
+          :aria-label="$t('sbcBreadcrumb.backBtn')"
+          data-cy="crumb-back"
+          :to="resolveBackHref"
+        />
+        <span class="text-white">|</span>
+        <UBreadcrumb
+          :links="breadcrumbs"
+          :aria-label="$t('sbcBreadcrumb.arialabel')"
+          class="flex min-w-0 flex-wrap items-center gap-x-1.5 pl-3 text-xs leading-6 text-white"
+          :ui="{
+            li: 'flex items-center gap-x-1.5 text-xs text-white leading-6 min-w-0',
+            base: 'flex items-center gap-x-1.5 group font-normal min-w-0',
+            label: 'block truncate tracking-wide',
+            active: 'text-white',
+            inactive: 'text-white underline hover:text-white',
+            icon: {
+              base: 'flex-shrink-0 w-3 h-3 text-white',
+              active: '',
+              inactive: '',
+            },
+          }"
+        />
+      </div>
+    </div>
+  </div>
+</template>

web/site/app/components/Sbc/Footer.vue

@@ -20,7 +20,7 @@ const links = [
     target: '_blank'
   },
   {
-    label: 'Hours of Availability',
+    label: 'SbcFooter.hours',
     to: 'https://www2.gov.bc.ca/gov/content?id=C41D8179671441B2BAA3BDDD3D89C9A9',
     target: '_blank'
   },

web/site/app/composables/sbcBreadcrumb.ts

@@ -0,0 +1,25 @@
+import { computed } from 'vue'
+
+export function useBreadcrumbs () {
+  const { t } = useI18n()
+  const route = useRoute()
+  const localePath = useLocalePath()
+
+  const breadcrumbs = computed(() => {
+    const bc = [
+      { label: t('sbcBreadcrumb.default'), to: 'https://bcregistry.gov.bc.ca/' }
+    ]
+    bc.push({ label: t('sbcBreadcrumb.sbcHome'), to: '/' })
+    // Check for /products
+    if (route.path.includes('/products') && !route.path.includes('/get-started')) {
+      bc.push({ label: t('sbcBreadcrumb.sbcProductslist'), to: localePath('/products') })
+    }
+    // Check for /products/get-started and include sub-paths like /account-setup
+    if (route.path.includes('/products/get-started')) {
+      bc.push({ label: t('sbcBreadcrumb.sbcProducts'), to: localePath('/products/get-started') })
+    }
+
+    return bc
+  })
+  return breadcrumbs
+}

web/site/app/locales/en-CA.ts

@@ -20,6 +20,14 @@ export default {
     openMainNav: 'Open Main Navigation Menu',
     closeMainNav: 'Close Main Navigation Menu'
   },
+  sbcBreadcrumb: {
+    default: 'BC Registries and Digital Service',
+    backBtn: 'Go Back',
+    arialabel: 'Breadcrumb',
+    sbcHome: 'Service BC Connect',
+    sbcProductslist: 'Products List',
+    sbcProducts: 'Products'
+  },
   page: {
     notFound: {
       h1: 'Page Not Found'

web/site/app/pages/index.vue

@@ -1,9 +1,19 @@
 <script setup lang="ts">
+import { useBreadcrumbs } from '~/composables/sbcBreadcrumb'
+import { setBreadcrumbs } from '~/utils/setBreadcrumb'
 const { t } = useI18n()
 useHead({
   title: t('page.home.title')
 })
-const localePath = useLocalePath()
+
+const breadcrumbs = useBreadcrumbs()
+watch(
+  breadcrumbs,
+  (newBreadcrumbs) => {
+    setBreadcrumbs(newBreadcrumbs)
+  },
+  { immediate: true }
+)
 
 </script>
 <template>

web/site/app/pages/products/[...slug].vue

@@ -1,7 +1,20 @@
 <script setup lang="ts">
+import { useBreadcrumbs } from '~/composables/sbcBreadcrumb'
+import { setBreadcrumbs } from '~/utils/setBreadcrumb'
+
 definePageMeta({
   layout: 'docs'
 })
+
+const breadcrumbs = useBreadcrumbs()
+watch(
+  breadcrumbs,
+  (newBreadcrumbs) => {
+    setBreadcrumbs(newBreadcrumbs)
+  },
+  { immediate: true }
+)
+
 </script>
 <template>
   <ContentDoc

web/site/app/pages/products/index.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { useBreadcrumbs } from '~/composables/sbcBreadcrumb'
+import { setBreadcrumbs } from '~/utils/setBreadcrumb'
 const { t, locale } = useI18n()
 useHead({
   title: t('page.products.title')
@@ -20,6 +22,15 @@ const completedProducts = computed(() => {
   return products.value?.sort((a, b) => a.name.localeCompare(b.name)) ?? []
 })
 
+const breadcrumbs = useBreadcrumbs()
+watch(
+  breadcrumbs,
+  (newBreadcrumbs) => {
+    setBreadcrumbs(newBreadcrumbs)
+  },
+  { immediate: true }
+)
+
 </script>
 <template>
   <div class="mx-auto w-full max-w-[1360px] p-2 sm:p-4 lg:p-8">

web/site/app/utils/setBreadcrumb.ts

@@ -0,0 +1,5 @@
+import type { BreadcrumbLink } from '#ui/types'
+export function setBreadcrumbs (breadcrumbs: BreadcrumbLink[]) {
+  const route = useRoute()
+  route.meta.breadcrumbs = breadcrumbs
+}

web/site/nuxt.config.ts

@@ -1,4 +1,5 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
+import type { BreadcrumbLink } from '#ui/types'
 export default defineNuxtConfig({
   devtools: { enabled: false },
   ssr: true,
@@ -131,3 +132,8 @@ export default defineNuxtConfig({
     id: 'G-GKRC2V8PT4'
   }
 })
+declare module '#app' {
+  interface PageMeta {
+    breadcrumbs?: BreadcrumbLink[]
+  }
+}