diff --git a/src/runtime/components/navigation/VerticalNavigation.vue b/src/runtime/components/navigation/VerticalNavigation.vue
index b5a0c126..a2ad7863 100644
--- a/src/runtime/components/navigation/VerticalNavigation.vue
+++ b/src/runtime/components/navigation/VerticalNavigation.vue
@@ -5,7 +5,7 @@
       v-slot="{ isActive }"
       :key="index"
       v-bind="link"
-      :class="baseClass"
+      :class="[baseClass, spacingClass]"
       :active-class="activeClass"
       :inactive-class="inactiveClass"
       @click="link.click && link.click()"
@@ -53,6 +53,10 @@ export default {
       type: String,
       default: () => $ui.verticalNavigation.base
     },
+    spacingClass: {
+      type: String,
+      default: () => $ui.verticalNavigation.spacing
+    },
     activeClass: {
       type: String,
       default: () => $ui.verticalNavigation.active
diff --git a/src/runtime/presets/default.ts b/src/runtime/presets/default.ts
index 3eabf83f..5437ee41 100644
--- a/src/runtime/presets/default.ts
+++ b/src/runtime/presets/default.ts
@@ -252,7 +252,8 @@ const toggle = {
 
 const verticalNavigation = {
   wrapper: 'space-y-1',
-  base: 'group flex items-center px-3 py-2 text-sm font-medium rounded-md w-full',
+  base: 'group flex items-center text-sm font-medium rounded-md w-full',
+  spacing: 'px-3 py-2',
   active: 'u-text-gray-900 u-bg-gray-100',
   inactive: 'u-text-gray-600 hover:u-text-gray-900 hover:u-bg-gray-50 focus:u-bg-gray-50',
   icon: {