now using template sintax, fixed broken styles

frontend/src/assets/styles/default-theme.scss

@@ -20,6 +20,7 @@ $dark-text-primary: map.get(darkTheme.$dark-theme, 'text-primary');
 $light-layer-selected-01: map.get(lightTheme.$light-theme, 'layer-selected-01');
 $light-link-primary: map.get(lightTheme.$light-theme, 'link-primary');
 $light-link-primary-hover: map.get(lightTheme.$light-theme, 'link-primary-hover');
+$light-focus: map.get(lightTheme.$light-theme, 'focus');
 
 //border
 $light-border-interactive: map.get(

frontend/src/components/common/PageTitle.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useRoute } from 'vue-router';
+import { RouterLink, useRoute } from 'vue-router';
 import Breadcrumb from 'primevue/breadcrumb';
 import { breadcrumbState } from '@/store/BreadcrumbState';
 
@@ -18,7 +18,23 @@ const route = useRoute();
 </script>
 
 <template>
-    <Breadcrumb v-if="route.meta.hasBreadcrumb" :model="breadcrumbState" />
+    <Breadcrumb
+        v-if="route.meta.hasBreadcrumb"
+        :model="breadcrumbState"
+        :pt="{
+            menuitem: { class: 'custom-menuitem' },
+        }"
+    >
+        <template #item="{ item }">
+            <RouterLink
+                v-if="item.path"
+                :to="item.path"
+                class="custom-menuitem-link"
+            >
+                <span class="custom-menutitem-text">{{ item.label }}</span>
+            </RouterLink>
+        </template>
+    </Breadcrumb>
     <h1 class="title">{{ props.title }}</h1>
     <h2 class="subtitle">{{ props.subtitle }}</h2>
 </template>
@@ -38,4 +54,35 @@ const route = useRoute();
     letter-spacing: 0.01rem;
     color: $light-text-secondary;
 }
+
+.custom-menuitem:focus-visible,
+.custom-menuitem-link:focus-visible {
+    outline: none;
+}
+
+.custom-menuitem-link {
+    padding: 0.2rem;
+    text-decoration: none;
+}
+
+.custom-menuitem-link:focus {
+    box-shadow: inset 0 0px 0px 0.063rem $light-focus;
+}
+
+.custom-menuitem:last-child .custom-menuitem-link {
+    pointer-events: none;
+}
+
+.custom-menutitem-text {
+    color: $light-link-primary;
+}
+
+.custom-menutitem-text:hover {
+    color: $light-link-primary-hover;
+}
+
+.custom-menuitem:last-child .custom-menutitem-text {
+    color: $light-text-primary;
+    display: contents;
+}
 </style>