diff --git a/src/runtime/components/navigation/HorizontalNavigation.vue b/src/runtime/components/navigation/HorizontalNavigation.vue
index 0d59b69c..a28c2384 100644
--- a/src/runtime/components/navigation/HorizontalNavigation.vue
+++ b/src/runtime/components/navigation/HorizontalNavigation.vue
@@ -1,7 +1,7 @@
 <template>
   <nav :class="ui.wrapper" v-bind="attrs">
     <ul v-for="(section, sectionIndex) of sections" :key="`section${sectionIndex}`" :class="ui.container">
-      <li v-for="(link, index) of section" :key="`section${sectionIndex}-${index}`">
+      <li v-for="(link, index) of section" :key="`section${sectionIndex}-${index}`" :class="ui.inner">
         <ULink
           v-slot="{ isActive }"
           v-bind="getULinkProps(link)"
diff --git a/src/runtime/ui.config/navigation/horizontalNavigation.ts b/src/runtime/ui.config/navigation/horizontalNavigation.ts
index 3f87ddd3..bc6a0eb8 100644
--- a/src/runtime/ui.config/navigation/horizontalNavigation.ts
+++ b/src/runtime/ui.config/navigation/horizontalNavigation.ts
@@ -1,6 +1,7 @@
 export default {
   wrapper: 'relative w-full flex items-center justify-between',
-  container: 'flex items-center',
+  container: 'flex items-center min-w-0',
+  inner: 'min-w-0',
   base: 'group relative w-full flex items-center gap-1.5 px-2.5 py-3.5 rounded-md font-medium text-sm focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 disabled:cursor-not-allowed disabled:opacity-75',
   before: 'before:absolute before:inset-x-0 before:inset-y-2 before:inset-px before:rounded-md hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50',
   after: 'after:absolute after:bottom-0 after:inset-x-2.5 after:block after:h-[2px] after:mt-2',