diff --git a/docs/components/docs/DocsAsideLinks.vue b/docs/components/docs/DocsAsideLinks.vue
index d79a5032..cf01f146 100644
--- a/docs/components/docs/DocsAsideLinks.vue
+++ b/docs/components/docs/DocsAsideLinks.vue
@@ -10,8 +10,11 @@
         class="mt-1"
         :ui="{
           wrapper: 'border-l border-gray-200 dark:border-gray-800 space-y-2',
+          base: 'group block border-l -ml-px lg:leading-6',
           padding: 'pl-4',
-          base: 'group text-sm block border-l -ml-px lg:leading-6',
+          rounded: '',
+          font: '',
+          ring: '',
           active: 'text-primary-500 dark:text-primary-400 border-current font-semibold',
           inactive: 'border-transparent hover:border-gray-400 dark:hover:border-gray-500 text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300'
         }"
diff --git a/src/runtime/app.config.ts b/src/runtime/app.config.ts
index 7af79017..78aadb9d 100644
--- a/src/runtime/app.config.ts
+++ b/src/runtime/app.config.ts
@@ -468,8 +468,13 @@ const skeleton = {
 
 const verticalNavigation = {
   wrapper: 'relative',
-  base: 'group flex items-center gap-2 text-sm font-medium rounded-md w-full relative 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 focus-visible:before:ring-inset focus-visible:before:ring-1 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 before:absolute before:inset-px before:rounded-md disabled:cursor-not-allowed disabled:opacity-75',
+  base: 'group relative flex items-center gap-2 focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-1 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 before:absolute before:inset-px before:rounded-md disabled:cursor-not-allowed disabled:opacity-75',
+  ring: 'focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400',
   padding: 'px-3 py-1.5',
+  width: 'w-full',
+  rounded: 'rounded-md',
+  font: 'font-medium',
+  size: 'text-sm',
   active: 'text-gray-900 dark:text-white before:bg-gray-100 dark:before:bg-gray-800',
   inactive: 'text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50',
   label: 'truncate relative',
diff --git a/src/runtime/components/navigation/VerticalNavigation.vue b/src/runtime/components/navigation/VerticalNavigation.vue
index c048d580..f2d232c0 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="omit(link, ['label', 'icon', 'iconClass', 'avatar', 'badge', 'click'])"
-      :class="[ui.base, ui.padding]"
+      :class="[ui.base, ui.padding, ui.width, ui.ring, ui.rounded, ui.font, ui.size]"
       :active-class="ui.active"
       :inactive-class="ui.inactive"
       @click="link.click"