diff --git a/src/components/nav/ABreadcrumbs.vue b/src/components/nav/ABreadcrumbs.vue
index df70339a9fa3d55c6514fa38d0ea3aa660d6c9be..332da64316797fed0af747cc20bd6b6739ffa0b1 100644
--- a/src/components/nav/ABreadcrumbs.vue
+++ b/src/components/nav/ABreadcrumbs.vue
@@ -3,23 +3,28 @@
     class="tw-flex tw-items-center tw-gap-2 tw-text-gray-500 tw-select-none tw-bg-gray-50 tw-p-2"
   >
     <template v-for="(crumb, index) in normalizedBreadcrumbs" :key="index">
-      <icon-system-uicons-chevron-right v-if="index > 0" class="tw-text-gray-300 -tw-mx-1" />
+      <icon-system-uicons-chevron-right
+        v-if="index > 0"
+        class="tw-text-gray-300 -tw-mx-1 tw-flex-none"
+      />
 
       <component
         :is="crumb.as"
         v-bind="crumb.attrs"
-        class="tw-inline-flex tw-gap-2 tw-items-center tw-text-inherit"
+        class="tw-inline-flex tw-gap-2 tw-items-center tw-text-inherit tw-min-w-0 tw-shrink last:tw-shrink-0"
+        :title="sanitizeHTML(crumb.title)"
       >
-        <icon-system-uicons-home-alt v-if="index === 0" />
-        <SafeHTML :html="crumb.title" />
+        <icon-system-uicons-home-alt v-if="index === 0" class="tw-flex-none" />
+        <SafeHTML :html="crumb.title" class="tw-truncate" />
       </component>
     </template>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { Breadcrumb, BreadcrumbNormalized } from '@/components/nav/nav'
 import { computed } from 'vue'
+import { sanitizeHTML } from '@/util'
+import { Breadcrumb, BreadcrumbNormalized } from '@/components/nav/nav'
 import SafeHTML from '@/components/generic/SafeHTML'
 
 const props = defineProps<{