diff --git a/internal/compiler/widgets/common/menu-base.slint b/internal/compiler/widgets/common/menu-base.slint
index 498762725..654990c1c 100644
--- a/internal/compiler/widgets/common/menu-base.slint
+++ b/internal/compiler/widgets/common/menu-base.slint
@@ -12,6 +12,9 @@ export component MenuBarItemBase {
     in property <length> font-size <=> label.font-size;
     in property <int> font-weight <=> label.font-weight;
     in property <length> border-radius <=> background-layer.border-radius;
+    in property <length> horizontal-padding;
+    in property <length> top-padding;
+    in property <length> bottom-padding;
 
     callback clicked;
     callback hovered;
@@ -21,10 +24,10 @@ export component MenuBarItemBase {
 
         touch-area := TouchArea {
             layout := HorizontalLayout {
-                padding-top: root.padding-top;
-                padding-bottom: root.padding-bottom;
-                padding-left: root.padding-left;
-                padding-right: root.padding-right;
+                padding-top: root.top-padding;
+                padding-bottom: root.bottom-padding;
+                padding-left: root.horizontal-padding;
+                padding-right: root.horizontal-padding;
 
                 label := Text {
                     text: entry.title;
@@ -62,16 +65,14 @@ export component MenuBarBase inherits Rectangle {
     in property <length> spacing <=> layout.spacing;
     in property <LayoutAlignment> alignment <=> layout.alignment;
     in property <length> min-layout-height;
+    in property <length> horizontal-padding;
 
     min-height: max(root.min-layout-height, layout.min-height);
 
     layout := HorizontalLayout {
         alignment: start;
-        padding: root.padding;
-        padding-left: root.padding-left;
-        padding-right: root.padding-right;
-        padding-top: root.padding-top;
-        padding-bottom: root.padding-bottom;
+        padding-left: root.horizontal-padding;
+        padding-right: root.horizontal-padding;
 
         @children
     }
@@ -80,13 +81,13 @@ export component MenuBarBase inherits Rectangle {
 export component MenuFrameBase inherits Rectangle {
     in property <length> spacing <=> layout.spacing;
     in property <length> layout-min-width;
+    in property <length> margin;
 
     clip: true;
     min-width: max(root.layout-min-width, layout.min-width);
 
     layout := VerticalLayout {
-        padding: root.padding;
-
+        padding: root.margin;
         @children
     }
 }
@@ -105,6 +106,8 @@ export component MenuItemBase {
     in property <image> sub-menu-icon;
     in property <length> spacing <=> layout.spacing;
     in property <length> icon-size;
+    in property <length> horizontal-padding;
+    in property <length> vertical-padding;
 
     callback set-current();
     callback clear-current();
@@ -118,10 +121,10 @@ export component MenuItemBase {
             enabled: entry.enabled;
 
             layout := HorizontalLayout {
-                padding-top: root.padding-top;
-                padding-bottom: root.padding-bottom;
-                padding-left: root.padding-left;
-                padding-right: root.padding-right;
+                padding-top: root.vertical-padding;
+                padding-bottom: root.vertical-padding;
+                padding-left: root.horizontal-padding;
+                padding-right: root.horizontal-padding;
 
                 spacing: 10px;
 
diff --git a/internal/compiler/widgets/cosmic/menu.slint b/internal/compiler/widgets/cosmic/menu.slint
index cfa1f3fe2..d874df83f 100644
--- a/internal/compiler/widgets/cosmic/menu.slint
+++ b/internal/compiler/widgets/cosmic/menu.slint
@@ -14,10 +14,9 @@ export component MenuBarItem {
     min-height: base.min-height;
 
     base := MenuBarItemBase {
-        padding-left: 12px;
-        padding-right: 12px;
-        padding-top: 4px;
-        padding-bottom: 4px;
+        horizontal-padding: 12px;
+        top-padding: 4px;
+        bottom-padding: 4px;
         default-foreground: CosmicPalette.accent-background;
         hover-foreground: CosmicPalette.accent-background;
         pressed-foreground: CosmicPalette.accent-background;
@@ -30,7 +29,6 @@ export component MenuBarItem {
 }
 
 export component MenuBar inherits MenuBarBase {
-    padding: 8px;
     spacing: 4px;
     min-layout-height: 48px;
 }
@@ -64,8 +62,7 @@ export component MenuItem {
             separator-color: CosmicPalette.border;
             font-size: CosmicFontSettings.body.font-size;
             font-weight: CosmicFontSettings.body.font-weight;
-            padding-left: 16px;
-            padding-right: 16px;
+            horizontal-padding: 16px;
             spacing: 8px;
             sub-menu-icon: @image-url("_arrow_forward.svg");
             icon-size: 16px;
diff --git a/internal/compiler/widgets/cupertino/menu.slint b/internal/compiler/widgets/cupertino/menu.slint
index e20b5c927..c3f794ed4 100644
--- a/internal/compiler/widgets/cupertino/menu.slint
+++ b/internal/compiler/widgets/cupertino/menu.slint
@@ -14,8 +14,7 @@ export component MenuBarItem {
     min-height: base.min-height;
 
     base := MenuBarItemBase {
-        padding-left: 8px;
-        padding-right: 8px;
+        horizontal-padding: 8px;
         default-foreground: CupertinoPalette.foreground;
         hover-foreground: CupertinoPalette.foreground;
         pressed-foreground: CupertinoPalette.foreground;
@@ -28,10 +27,7 @@ export component MenuBarItem {
 }
 
 export component MenuBar inherits MenuBarBase {
-    padding-top: 0;
-    padding-bottom: 0;
-    padding-left: 8px;
-    padding-right: 8px;
+    horizontal-padding: 8px;
     min-layout-height: 24px;
 }
 
@@ -44,7 +40,7 @@ export component MenuFrame inherits MenuFrameBase {
     drop-shadow-offset-y: 0.5px;
     background: CupertinoPalette.background;
     border-radius: 6px;
-    padding: 4px;
+    margin: 4px;
 }
 
 export component MenuItem {
@@ -66,8 +62,7 @@ export component MenuItem {
             font-size: CupertinoFontSettings.body.font-size;
             font-weight: CupertinoFontSettings.body.font-weight;
             border-radius: 5px;
-            padding-left: 8px;
-            padding-right: 8px;
+            horizontal-padding: 8px;
             spacing: 4px;
             sub-menu-icon: @image-url("_arrow_forward.svg");
             icon-size: 13px;
diff --git a/internal/compiler/widgets/fluent/menu.slint b/internal/compiler/widgets/fluent/menu.slint
index f8ba17683..d4ad33fa5 100644
--- a/internal/compiler/widgets/fluent/menu.slint
+++ b/internal/compiler/widgets/fluent/menu.slint
@@ -14,10 +14,9 @@ export component MenuBarItem {
     min-height: base.min-height;
 
     base := MenuBarItemBase {
-        padding-left: 11px;
-        padding-right: 11px;
-        padding-top: 4px;
-        padding-bottom: 6px;
+        horizontal-padding: 11px;
+        top-padding: 4px;
+        bottom-padding: 6px;
         default-foreground: FluentPalette.foreground;
         hover-foreground: FluentPalette.foreground;
         pressed-foreground: FluentPalette.text-secondary;
@@ -30,7 +29,6 @@ export component MenuBarItem {
 }
 
 export component MenuBar inherits MenuBarBase {
-    padding: 9px;
     spacing: 10px;
     min-layout-height: 40px;
 }
@@ -43,7 +41,7 @@ export component MenuFrame inherits MenuFrameBase {
     drop-shadow-color: FluentPalette.shadow;
     drop-shadow-offset-y: 8px;
     drop-shadow-blur: 16px;
-    padding: 1px;
+    margin: 1px;
     layout-min-width: 280px;
 }
 
@@ -68,8 +66,7 @@ export component MenuItem {
             font-size: FluentFontSettings.body.font-size;
             font-weight: FluentFontSettings.body.font-weight;
             border-radius: 4px;
-            padding-left: 11px;
-            padding-right: 11px;
+            horizontal-padding: 11px;
             spacing: 8px;
             sub-menu-icon: @image-url("_arrow_forward.svg");
             icon-size: 12px;
diff --git a/internal/compiler/widgets/material/menu.slint b/internal/compiler/widgets/material/menu.slint
index b6d179dac..98a188176 100644
--- a/internal/compiler/widgets/material/menu.slint
+++ b/internal/compiler/widgets/material/menu.slint
@@ -14,10 +14,9 @@ export component MenuBarItem {
     min-height: base.min-height;
 
     base := MenuBarItemBase {
-        padding-left: 12px;
-        padding-right: 12px;
-        padding-top: 8px;
-        padding-bottom: 8px;
+        horizontal-padding: 12px;
+        top-padding: 8px;
+        bottom-padding: 8px;
         default-foreground: MaterialPalette.foreground;
         hover-foreground: MaterialPalette.foreground;
         pressed-foreground: MaterialPalette.foreground;
@@ -29,8 +28,7 @@ export component MenuBarItem {
 }
 
 export component MenuBar inherits MenuBarBase {
-    padding-left: 4px;
-    padding-right: 4px;
+    horizontal-padding: 4px;
     spacing: 8px;
     min-layout-height: 40px;
 }
@@ -43,8 +41,6 @@ export component MenuFrame inherits MenuFrameBase {
     drop-shadow-color: MaterialPalette.shadow;
     drop-shadow-offset-y: 2px;
     drop-shadow-blur: 6px;
-    padding-top: 8px;
-    padding-bottom: 8px;
     layout-min-width: 200px;
 }
 
@@ -66,10 +62,8 @@ export component MenuItem {
             separator-color: MaterialPalette.border;
             font-size: MaterialFontSettings.body-large.font-size;
             font-weight: MaterialFontSettings.body-large.font-weight;
-            padding-left: 12px;
-            padding-right: 12px;
-            padding-top: 8px;
-            padding-bottom: 8px;
+            horizontal-padding: 12px;
+            vertical-padding: 8px;
             spacing: 8px;
             sub-menu-icon: @image-url("_arrow_forward.svg");
             icon-size: MaterialFontSettings.body-large.font-size;
diff --git a/internal/compiler/widgets/qt/menu.slint b/internal/compiler/widgets/qt/menu.slint
index bfc0a0981..96a3e82b3 100644
--- a/internal/compiler/widgets/qt/menu.slint
+++ b/internal/compiler/widgets/qt/menu.slint
@@ -13,10 +13,9 @@ export component MenuBarItem {
     min-height: base.min-height;
 
     base := MenuBarItemBase {
-        padding-left: 11px;
-        padding-right: 11px;
-        padding-top: 4px;
-        padding-bottom: 6px;
+        horizontal-padding: 11px;
+        top-padding: 4px;
+        bottom-padding: 6px;
         default-foreground: NativePalette.foreground;
         hover-foreground: NativePalette.accent-foreground;
         pressed-foreground: NativePalette.accent-foreground;
@@ -29,7 +28,6 @@ export component MenuBarItem {
 }
 
 export component MenuBar inherits MenuBarBase {
-    padding: 9px;
     spacing: 10px;
     min-layout-height: 40px;
 }
@@ -40,7 +38,7 @@ export component MenuFrame inherits MenuFrameBase {
     border-width: 1px;
     border-color: NativePalette.border;
     drop-shadow-color: transparent;
-    padding: 1px;
+    margin: 1px;
     layout-min-width: 280px;
 }
 
@@ -65,8 +63,7 @@ export component MenuItem {
             font-size: NativeStyleMetrics.default-font-size;
             font-weight: 300;
             border-radius: 4px;
-            padding-left: 11px;
-            padding-right: 11px;
+            horizontal-padding: 11px;
             spacing: 8px;
             sub-menu-icon: @image-url("_arrow_forward.svg");
             icon-size: 12px;
diff --git a/tests/cases/widgets/menubar.slint b/tests/cases/widgets/menubar.slint
index c6827ef47..43641621a 100644
--- a/tests/cases/widgets/menubar.slint
+++ b/tests/cases/widgets/menubar.slint
@@ -3,7 +3,7 @@
 // SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-2.0 OR LicenseRef-Slint-Software-3.0
 
 import { AboutSlint, Button } from "std-widgets.slint";
-import { MenuBorder } from "../../../internal/compiler/widgets/fluent/components.slint";
+
 export component TestCase inherits Window {
     width: 300px;
     height: 300px;