diff --git a/client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx b/client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx
index dfe9539af..8ae653ffa 100644
--- a/client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx
+++ b/client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx
@@ -183,6 +183,11 @@ const DrawerList = styled.div<{
     gap: 8px;
     background-color: ${(p) => p.$itemStyle.background};
     color: ${(p) => p.$itemStyle.text};
+    font-size: ${(p) => p.$itemStyle.textSize};
+    font-family: ${(p) => p.$itemStyle.fontFamily};
+    font-style: ${(p) => p.$itemStyle.fontStyle};
+    font-weight: ${(p) => p.$itemStyle.textWeight};
+    text-decoration: ${(p) => p.$itemStyle.textDecoration};
     border-radius: ${(p) => p.$itemStyle.radius};
     border: 1px solid ${(p) => p.$itemStyle.border};
     margin: ${(p) => p.$itemStyle.margin};
@@ -194,11 +199,21 @@ const DrawerList = styled.div<{
     background-color: ${(p) => p.$hoverStyle.background};
     color: ${(p) => p.$hoverStyle.text};
     border: 1px solid ${(p) => p.$hoverStyle.border};
+    font-size: ${(p) => p.$hoverStyle.textSize || p.$itemStyle.textSize};
+    font-family: ${(p) => p.$hoverStyle.fontFamily || p.$itemStyle.fontFamily};
+    font-style: ${(p) => p.$hoverStyle.fontStyle || p.$itemStyle.fontStyle};
+    font-weight: ${(p) => p.$hoverStyle.textWeight || p.$itemStyle.textWeight};
+    text-decoration: ${(p) => p.$hoverStyle.textDecoration || p.$itemStyle.textDecoration};
   }
   .drawer-item.active {
     background-color: ${(p) => p.$activeStyle.background};
     color: ${(p) => p.$activeStyle.text};
     border: 1px solid ${(p) => p.$activeStyle.border};
+    font-size: ${(p) => p.$activeStyle.textSize || p.$itemStyle.textSize};
+    font-family: ${(p) => p.$activeStyle.fontFamily || p.$itemStyle.fontFamily};
+    font-style: ${(p) => p.$activeStyle.fontStyle || p.$itemStyle.fontStyle};
+    font-weight: ${(p) => p.$activeStyle.textWeight || p.$itemStyle.textWeight};
+    text-decoration: ${(p) => p.$activeStyle.textDecoration || p.$itemStyle.textDecoration};
   }
 `;
 
@@ -260,16 +275,37 @@ const StyledTabBar = styled(TabBar)<{
   .adm-tab-bar-item {
     background-color: ${(props) => props.$tabItemStyle?.background};
     color: ${(props) => props.$tabItemStyle?.text};
+    font-size: ${(props) => props.$tabItemStyle?.textSize};
+    font-family: ${(props) => props.$tabItemStyle?.fontFamily};
+    font-style: ${(props) => props.$tabItemStyle?.fontStyle};
+    font-weight: ${(props) => props.$tabItemStyle?.textWeight};
+    text-decoration: ${(props) => props.$tabItemStyle?.textDecoration};
     border-radius: ${(props) => props.$tabItemStyle?.radius} !important;
     border: ${(props) => `1px solid ${props.$tabItemStyle?.border}`};
     margin: ${(props) => props.$tabItemStyle?.margin};
     padding: ${(props) => props.$tabItemStyle?.padding};
+
+    .adm-tab-bar-item-title {
+      font-size: ${(props) => props.$tabItemStyle?.textSize};
+      font-family: ${(props) => props.$tabItemStyle?.fontFamily};
+      font-style: ${(props) => props.$tabItemStyle?.fontStyle};
+      font-weight: ${(props) => props.$tabItemStyle?.textWeight};
+      text-decoration: ${(props) => props.$tabItemStyle?.textDecoration};
+    }
   }
 
   .adm-tab-bar-item:hover {
     background-color: ${(props) => props.$tabItemHoverStyle?.background} !important;
     color: ${(props) => props.$tabItemHoverStyle?.text} !important;
     border: ${(props) => `1px solid ${props.$tabItemHoverStyle?.border}`};
+
+    .adm-tab-bar-item-title {
+      font-size: ${(props) => props.$tabItemHoverStyle?.textSize || props.$tabItemStyle?.textSize};
+      font-family: ${(props) => props.$tabItemHoverStyle?.fontFamily || props.$tabItemStyle?.fontFamily};
+      font-style: ${(props) => props.$tabItemHoverStyle?.fontStyle || props.$tabItemStyle?.fontStyle};
+      font-weight: ${(props) => props.$tabItemHoverStyle?.textWeight || props.$tabItemStyle?.textWeight};
+      text-decoration: ${(props) => props.$tabItemHoverStyle?.textDecoration || props.$tabItemStyle?.textDecoration};
+    }
   }
 
   .adm-tab-bar-item.adm-tab-bar-item-active {
@@ -278,6 +314,13 @@ const StyledTabBar = styled(TabBar)<{
     .adm-tab-bar-item-icon, .adm-tab-bar-item-title {
       color: ${(props) => props.$tabItemActiveStyle.text};
     }
+    .adm-tab-bar-item-title {
+      font-size: ${(props) => props.$tabItemActiveStyle?.textSize || props.$tabItemStyle?.textSize};
+      font-family: ${(props) => props.$tabItemActiveStyle?.fontFamily || props.$tabItemStyle?.fontFamily};
+      font-style: ${(props) => props.$tabItemActiveStyle?.fontStyle || props.$tabItemStyle?.fontStyle};
+      font-weight: ${(props) => props.$tabItemActiveStyle?.textWeight || props.$tabItemStyle?.textWeight};
+      text-decoration: ${(props) => props.$tabItemActiveStyle?.textDecoration || props.$tabItemStyle?.textDecoration};
+    }
   }
 `;
 
diff --git a/client/packages/lowcoder/src/comps/comps/layout/navLayout.tsx b/client/packages/lowcoder/src/comps/comps/layout/navLayout.tsx
index b94fe8965..4f0879879 100644
--- a/client/packages/lowcoder/src/comps/comps/layout/navLayout.tsx
+++ b/client/packages/lowcoder/src/comps/comps/layout/navLayout.tsx
@@ -49,8 +49,8 @@ const DEFAULT_WIDTH = 240;
 type MenuItemStyleOptionValue = "normal" | "hover" | "active";
 const EventOptions = [clickEvent] as const;
 
-const StyledSide = styled(LayoutSider)`
-  max-height: calc(100vh - ${TopHeaderHeight});
+const StyledSide = styled(LayoutSider)<{ $isPreview: boolean }>`
+  max-height: ${(props) => (props.$isPreview ? `calc(100vh - ${TopHeaderHeight})` : "100vh")};
   overflow: auto;
 
   .ant-menu-item:first-child {
@@ -87,18 +87,42 @@ const StyledMenu = styled(AntdMenu)<{
     border: ${(props) => `1px solid ${props.$navItemStyle?.border}`};
     margin: ${(props) => props.$navItemStyle?.margin};
     padding: ${(props) => props.$navItemStyle?.padding};
+  }
 
+  .ant-menu-title-content {
+    font-size: ${(props) => props.$navItemStyle?.textSize};
+    font-family: ${(props) => props.$navItemStyle?.fontFamily};
+    font-style: ${(props) => props.$navItemStyle?.fontStyle};
+    font-weight: ${(props) => props.$navItemStyle?.textWeight};
+    text-decoration: ${(props) => props.$navItemStyle?.textDecoration};
   }
+
   .ant-menu-item-active {
     background-color: ${(props) => props.$navItemHoverStyle?.background} !important;
     color: ${(props) => props.$navItemHoverStyle?.text} !important;
     border: ${(props) => `1px solid ${props.$navItemHoverStyle?.border}`};
+
+    .ant-menu-title-content {
+      font-size: ${(props) => props.$navItemHoverStyle?.textSize || props.$navItemStyle?.textSize};
+      font-family: ${(props) => props.$navItemHoverStyle?.fontFamily || props.$navItemStyle?.fontFamily};
+      font-style: ${(props) => props.$navItemHoverStyle?.fontStyle || props.$navItemStyle?.fontStyle};
+      font-weight: ${(props) => props.$navItemHoverStyle?.textWeight || props.$navItemStyle?.textWeight};
+      text-decoration: ${(props) => props.$navItemHoverStyle?.textDecoration || props.$navItemStyle?.textDecoration};
+    }
   }
 
   .ant-menu-item-selected {
     background-color: ${(props) => props.$navItemActiveStyle?.background} !important;
     color: ${(props) => props.$navItemActiveStyle?.text} !important;
     border: ${(props) => `1px solid ${props.$navItemActiveStyle?.border}`};
+
+    .ant-menu-title-content {
+      font-size: ${(props) => props.$navItemActiveStyle?.textSize || props.$navItemStyle?.textSize};
+      font-family: ${(props) => props.$navItemActiveStyle?.fontFamily || props.$navItemStyle?.fontFamily};
+      font-style: ${(props) => props.$navItemActiveStyle?.fontStyle || props.$navItemStyle?.fontStyle};
+      font-weight: ${(props) => props.$navItemActiveStyle?.textWeight || props.$navItemStyle?.textWeight};
+      text-decoration: ${(props) => props.$navItemActiveStyle?.textDecoration || props.$navItemStyle?.textDecoration};
+    }
   }
 
   .ant-menu-submenu {
@@ -112,11 +136,15 @@ const StyledMenu = styled(AntdMenu)<{
       max-height: 100%;
       background-color: ${(props) => props.$navItemStyle?.background};
       color: ${(props) => props.$navItemStyle?.text};
+      font-size: ${(props) => props.$navItemStyle?.textSize};
+      font-family: ${(props) => props.$navItemStyle?.fontFamily};
+      font-style: ${(props) => props.$navItemStyle?.fontStyle};
+      font-weight: ${(props) => props.$navItemStyle?.textWeight};
+      text-decoration: ${(props) => props.$navItemStyle?.textDecoration};
       border-radius: ${(props) => props.$navItemStyle?.radius} !important;
       border: ${(props) => `1px solid ${props.$navItemStyle?.border}`};
       margin: 0;
       padding: ${(props) => props.$navItemStyle?.padding};
-
     }
 
     .ant-menu-item {
@@ -129,6 +157,11 @@ const StyledMenu = styled(AntdMenu)<{
         background-color: ${(props) => props.$navItemHoverStyle?.background} !important;
         color: ${(props) => props.$navItemHoverStyle?.text} !important;
         border: ${(props) => `1px solid ${props.$navItemHoverStyle?.border}`};
+        font-size: ${(props) => props.$navItemHoverStyle?.textSize || props.$navItemStyle?.textSize};
+        font-family: ${(props) => props.$navItemHoverStyle?.fontFamily || props.$navItemStyle?.fontFamily};
+        font-style: ${(props) => props.$navItemHoverStyle?.fontStyle || props.$navItemStyle?.fontStyle};
+        font-weight: ${(props) => props.$navItemHoverStyle?.textWeight || props.$navItemStyle?.textWeight};
+        text-decoration: ${(props) => props.$navItemHoverStyle?.textDecoration || props.$navItemStyle?.textDecoration};
       }
     }
     &.ant-menu-submenu-selected {
@@ -137,6 +170,11 @@ const StyledMenu = styled(AntdMenu)<{
         background-color: ${(props) => props.$navItemActiveStyle?.background} !important;
         color: ${(props) => props.$navItemActiveStyle?.text} !important;
         border: ${(props) => `1px solid ${props.$navItemActiveStyle?.border}`};
+        font-size: ${(props) => props.$navItemActiveStyle?.textSize || props.$navItemStyle?.textSize};
+        font-family: ${(props) => props.$navItemActiveStyle?.fontFamily || props.$navItemStyle?.fontFamily};
+        font-style: ${(props) => props.$navItemActiveStyle?.fontStyle || props.$navItemStyle?.fontStyle};
+        font-weight: ${(props) => props.$navItemActiveStyle?.textWeight || props.$navItemStyle?.textWeight};
+        text-decoration: ${(props) => props.$navItemActiveStyle?.textDecoration || props.$navItemStyle?.textDecoration};
       }
     }
   }
@@ -161,6 +199,11 @@ const StyledMenu = styled(AntdMenu)<{
 
 `;
 
+
+const ViewerMainContent = styled(MainContent)<{ $isPreview: boolean }>`
+  height: ${(props) => (props.$isPreview ? `calc(100vh - ${TopHeaderHeight})` : "100vh")};
+`;
+
 const StyledImage = styled.img`
   height: 1em;
   color: currentColor;
@@ -317,6 +360,7 @@ let NavTmpLayout = (function () {
 NavTmpLayout = withViewFn(NavTmpLayout, (comp) => {
   const pathParam = useAppPathParam();
   const isViewMode = isUserViewMode(pathParam);
+  const isPreview = pathParam.viewMode === "preview";
   const [selectedKey, setSelectedKey] = useState("");
   const items = comp.children.items.getView();
   const navWidth = comp.children.width.getView();
@@ -636,25 +680,25 @@ NavTmpLayout = withViewFn(NavTmpLayout, (comp) => {
   );
 
   let content = (
-    <Layout>
+    <Layout style={{ height: isPreview ? undefined : "100vh" }}>
       {(navPosition === 'top') && (
         <Header style={{ display: 'flex', alignItems: 'center', padding: 0 }}>
           { navMenu }
         </Header>
       )}
       {(navPosition === 'left') && (
-        <StyledSide theme="light" width={navWidth} collapsed={navCollapse}>
+        <StyledSide $isPreview={isPreview} theme="light" width={navWidth} collapsed={navCollapse}>
           {navMenu}
         </StyledSide>
       )}
-      <MainContent>{pageView}</MainContent>
+      <ViewerMainContent $isPreview={isPreview}>{pageView}</ViewerMainContent>
       {(navPosition === 'bottom') && (
         <Footer style={{ display: 'flex', alignItems: 'center', padding: 0 }}>
           { navMenu }
         </Footer>
       )}
       {(navPosition === 'right') && (
-        <StyledSide theme="light" width={navWidth} collapsed={navCollapse}>
+        <StyledSide $isPreview={isPreview} theme="light" width={navWidth} collapsed={navCollapse}>
           {navMenu}
         </StyledSide>
       )}
diff --git a/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx b/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx
index 940e0110d..f852fe694 100644
--- a/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx
@@ -29,9 +29,6 @@ import {
   NavLayoutItemStyle,
   NavLayoutItemHoverStyle,
   NavLayoutItemActiveStyle,
-  NavSubMenuItemStyle,
-  NavSubMenuItemHoverStyle,
-  NavSubMenuItemActiveStyle,
 } from "comps/controls/styleControlConstants";
 import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
@@ -98,10 +95,19 @@ const Item = styled.div<{
   $fontStyle: string;
   $textWeight: string;
   $textSize: string;
+  $textDecoration: string;
+  $hoverFontFamily?: string;
+  $hoverFontStyle?: string;
+  $hoverTextWeight?: string;
+  $hoverTextSize?: string;
+  $hoverTextDecoration?: string;
+  $activeFontFamily?: string;
+  $activeFontStyle?: string;
+  $activeTextWeight?: string;
+  $activeTextSize?: string;
+  $activeTextDecoration?: string;
   $margin: string;
   $padding: string;
-  $textTransform:string;
-  $textDecoration:string;
   $bg?: string;
   $hoverBg?: string;
   $activeBg?: string;
@@ -112,24 +118,40 @@ const Item = styled.div<{
   $disabled?: boolean;
 }>`
   line-height: 30px;
-  padding: ${(props) => props.$padding ? props.$padding : '0 16px'};
+  padding: ${(props) => props.$padding || '0 16px'};
   color: ${(props) => props.$disabled ? `${props.$color}80` : (props.$active ? props.$activeColor : props.$color)};
   background-color: ${(props) => (props.$active ? (props.$activeBg || 'transparent') : (props.$bg || 'transparent'))};
-  border: ${(props) => props.$border ? `1px solid ${props.$border}` : '1px solid transparent'};
-  border-radius: ${(props) => props.$radius ? props.$radius : '0px'};
-  font-weight: ${(props) => (props.$textWeight ? props.$textWeight : 500)};
-  font-family:${(props) => (props.$fontFamily ? props.$fontFamily : 'sans-serif')};
-  font-style:${(props) => (props.$fontStyle ? props.$fontStyle : 'normal')};
-  font-size:${(props) => (props.$textSize ? props.$textSize : '14px')};
-  text-transform:${(props) => (props.$textTransform ? props.$textTransform : '')};
-  text-decoration:${(props) => (props.$textDecoration ? props.$textDecoration : '')};
-  margin:${(props) => props.$margin ? props.$margin : '0px'};
+  border: ${(props) => props.$active 
+    ? (props.$activeBorder ? `1px solid ${props.$activeBorder}` : (props.$border ? `1px solid ${props.$border}` : '1px solid transparent'))
+    : (props.$border ? `1px solid ${props.$border}` : '1px solid transparent')};
+  border-radius: ${(props) => props.$radius || '0px'};
+  font-weight: ${(props) => props.$active 
+    ? (props.$activeTextWeight || props.$textWeight || 500) 
+    : (props.$textWeight || 500)};
+  font-family: ${(props) => props.$active 
+    ? (props.$activeFontFamily || props.$fontFamily || 'sans-serif') 
+    : (props.$fontFamily || 'sans-serif')};
+  font-style: ${(props) => props.$active 
+    ? (props.$activeFontStyle || props.$fontStyle || 'normal') 
+    : (props.$fontStyle || 'normal')};
+  font-size: ${(props) => props.$active 
+    ? (props.$activeTextSize || props.$textSize || '14px') 
+    : (props.$textSize || '14px')};
+  text-decoration: ${(props) => props.$active 
+    ? (props.$activeTextDecoration || props.$textDecoration || 'none') 
+    : (props.$textDecoration || 'none')};
+  margin: ${(props) => props.$margin || '0px'};
   
   &:hover {
     color: ${(props) => props.$disabled ? (props.$active ? props.$activeColor : props.$color) : (props.$hoverColor || props.$activeColor)};
     background-color: ${(props) => props.$disabled ? (props.$active ? (props.$activeBg || 'transparent') : (props.$bg || 'transparent')) : (props.$hoverBg || props.$activeBg || props.$bg || 'transparent')};
     border: ${(props) => props.$hoverBorder ? `1px solid ${props.$hoverBorder}` : (props.$activeBorder ? `1px solid ${props.$activeBorder}` : (props.$border ? `1px solid ${props.$border}` : '1px solid transparent'))};
     cursor: ${(props) => props.$disabled ? 'not-allowed' : 'pointer'};
+    font-weight: ${(props) => props.$disabled ? undefined : (props.$hoverTextWeight || props.$textWeight || 500)};
+    font-family: ${(props) => props.$disabled ? undefined : (props.$hoverFontFamily || props.$fontFamily || 'sans-serif')};
+    font-style: ${(props) => props.$disabled ? undefined : (props.$hoverFontStyle || props.$fontStyle || 'normal')};
+    font-size: ${(props) => props.$disabled ? undefined : (props.$hoverTextSize || props.$textSize || '14px')};
+    text-decoration: ${(props) => props.$disabled ? undefined : (props.$hoverTextDecoration || props.$textDecoration || 'none')};
   }
 
   .anticon {
@@ -171,31 +193,46 @@ const StyledMenu = styled(Menu) <
     $fontStyle?: string;
     $textWeight?: string;
     $textSize?: string;
+    $textDecoration?: string;
+    $hoverFontFamily?: string;
+    $hoverFontStyle?: string;
+    $hoverTextWeight?: string;
+    $hoverTextSize?: string;
+    $hoverTextDecoration?: string;
+    $activeFontFamily?: string;
+    $activeFontStyle?: string;
+    $activeTextWeight?: string;
+    $activeTextSize?: string;
+    $activeTextDecoration?: string;
     $padding?: string;
     $margin?: string;
-    $textTransform?: string;
-    $textDecoration?: string;
   }
 >`
   /* Base submenu item styles */
-  .ant-dropdown-menu-item{
+  .ant-dropdown-menu-item {
     color: ${(p) => p.$color};
     background-color: ${(p) => p.$bg || "transparent"};
     border-radius: ${(p) => p.$radius || "0px"};
+    border: ${(p) => p.$border ? `1px solid ${p.$border}` : "1px solid transparent"};
     font-weight: ${(p) => p.$textWeight || 500};
     font-family: ${(p) => p.$fontFamily || "sans-serif"};
     font-style: ${(p) => p.$fontStyle || "normal"};
     font-size: ${(p) => p.$textSize || "14px"};
-    text-transform: ${(p) => p.$textTransform || "none"};
     text-decoration: ${(p) => p.$textDecoration || "none"};
     padding: ${(p) => p.$padding || "0 16px"};
     margin: ${(p) => p.$margin || "0px"};
     line-height: 30px;
   }
   /* Hover state */
-  .ant-dropdown-menu-item:hover{
-    color: ${(p) => p.$hoverColor || p.$activeColor};
-    background-color: ${(p) => p.$hoverBg || "transparent"} !important;
+  .ant-dropdown-menu-item:hover {
+    color: ${(p) => p.$hoverColor || p.$color};
+    background-color: ${(p) => p.$hoverBg || p.$bg || "transparent"} !important;
+    border: ${(p) => p.$hoverBorder ? `1px solid ${p.$hoverBorder}` : (p.$border ? `1px solid ${p.$border}` : "1px solid transparent")};
+    font-weight: ${(p) => p.$hoverTextWeight || p.$textWeight || 500};
+    font-family: ${(p) => p.$hoverFontFamily || p.$fontFamily || "sans-serif"};
+    font-style: ${(p) => p.$hoverFontStyle || p.$fontStyle || "normal"};
+    font-size: ${(p) => p.$hoverTextSize || p.$textSize || "14px"};
+    text-decoration: ${(p) => p.$hoverTextDecoration || p.$textDecoration || "none"};
     cursor: pointer;
   }
   /* Selected/active state */
@@ -203,7 +240,12 @@ const StyledMenu = styled(Menu) <
   .ant-menu-item-selected {
     color: ${(p) => p.$activeColor};
     background-color: ${(p) => p.$activeBg || p.$bg || "transparent"};
-    border: ${(p) => (p.$activeBorder ? `1px solid ${p.$activeBorder}` : "1px solid transparent")};
+    border: ${(p) => p.$activeBorder ? `1px solid ${p.$activeBorder}` : (p.$border ? `1px solid ${p.$border}` : "1px solid transparent")};
+    font-weight: ${(p) => p.$activeTextWeight || p.$textWeight || 500};
+    font-family: ${(p) => p.$activeFontFamily || p.$fontFamily || "sans-serif"};
+    font-style: ${(p) => p.$activeFontStyle || p.$fontStyle || "normal"};
+    font-size: ${(p) => p.$activeTextSize || p.$textSize || "14px"};
+    text-decoration: ${(p) => p.$activeTextDecoration || p.$textDecoration || "none"};
   }
   /* Disabled state */
   .ant-dropdown-menu-item-disabled,
@@ -391,9 +433,7 @@ function renderAdvancedSection(children: any) {
 function renderStyleSections(
   children: any,
   styleSegment: MenuItemStyleOptionValue,
-  setStyleSegment: (k: MenuItemStyleOptionValue) => void,
-  subStyleSegment: MenuItemStyleOptionValue,
-  setSubStyleSegment: (k: MenuItemStyleOptionValue) => void
+  setStyleSegment: (k: MenuItemStyleOptionValue) => void
 ) {
   const isHamburger = children.displayMode.getView() === 'hamburger';
   return (
@@ -416,19 +456,6 @@ function renderStyleSections(
         {styleSegment === "hover" && children.navItemHoverStyle.getPropertyView()}
         {styleSegment === "active" && children.navItemActiveStyle.getPropertyView()}
       </Section>
-      <Section name={"Submenu Item Style"}>
-        {controlItem({}, (
-          <Segmented
-            block
-            options={menuItemStyleOptions as any}
-            value={subStyleSegment}
-            onChange={(k) => setSubStyleSegment(k as MenuItemStyleOptionValue)}
-          />
-        ))}
-        {subStyleSegment === "normal" && children.subNavItemStyle.getPropertyView()}
-        {subStyleSegment === "hover" && children.subNavItemHoverStyle.getPropertyView()}
-        {subStyleSegment === "active" && children.subNavItemActiveStyle.getPropertyView()}
-      </Section>
       {isHamburger && (
         <>
           <Section name={"Hamburger Button Style"}>
@@ -476,9 +503,6 @@ const childrenMap = {
   hamburgerButtonStyle: styleControl(HamburgerButtonStyle, 'hamburgerButtonStyle'),
   drawerContainerStyle: styleControl(DrawerContainerStyle, 'drawerContainerStyle'),
   animationStyle: styleControl(AnimationStyle, 'animationStyle'),
-  subNavItemStyle: styleControl(NavSubMenuItemStyle, 'subNavItemStyle'),
-  subNavItemHoverStyle: styleControl(NavSubMenuItemHoverStyle, 'subNavItemHoverStyle'),
-  subNavItemActiveStyle: styleControl(NavSubMenuItemActiveStyle, 'subNavItemActiveStyle'),
   items: withDefault(migrateOldData(createNavItemsControl(), fixOldItemsData), {
     optionType: "manual",
     manual: [
@@ -537,24 +561,33 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => {
           <Item
             key={idx}
             $active={active || subMenuSelectedKeys.length > 0}
-            $color={(props.navItemStyle && props.navItemStyle.text) || props.style.text}
-            $hoverColor={(props.navItemHoverStyle && props.navItemHoverStyle.text) || props.style.accent}
-            $activeColor={(props.navItemActiveStyle && props.navItemActiveStyle.text) || props.style.accent}
-            $fontFamily={props.style.fontFamily}
-            $fontStyle={props.style.fontStyle}
-            $textWeight={props.style.textWeight}
-            $textSize={props.style.textSize}
-            $padding={(props.navItemStyle && props.navItemStyle.padding) || props.style.padding}
-            $textTransform={props.style.textTransform}
-            $textDecoration={props.style.textDecoration}
-            $margin={(props.navItemStyle && props.navItemStyle.margin) || props.style.margin}
-            $bg={(props.navItemStyle && props.navItemStyle.background) || undefined}
-            $hoverBg={(props.navItemHoverStyle && props.navItemHoverStyle.background) || undefined}
-            $activeBg={(props.navItemActiveStyle && props.navItemActiveStyle.background) || undefined}
-            $border={(props.navItemStyle && props.navItemStyle.border) || undefined}
-            $hoverBorder={(props.navItemHoverStyle && props.navItemHoverStyle.border) || undefined}
-            $activeBorder={(props.navItemActiveStyle && props.navItemActiveStyle.border) || undefined}
-            $radius={(props.navItemStyle && props.navItemStyle.radius) || undefined}
+            $color={props.navItemStyle?.text || props.style.accent}
+            $hoverColor={props.navItemHoverStyle?.text || props.navItemStyle?.text || props.style.accent}
+            $activeColor={props.navItemActiveStyle?.text || props.navItemStyle?.text || props.style.accent}
+            $fontFamily={props.navItemStyle?.fontFamily || 'sans-serif'}
+            $fontStyle={props.navItemStyle?.fontStyle || 'normal'}
+            $textWeight={props.navItemStyle?.textWeight || '500'}
+            $textSize={props.navItemStyle?.textSize || '14px'}
+            $textDecoration={props.navItemStyle?.textDecoration || 'none'}
+            $hoverFontFamily={props.navItemHoverStyle?.fontFamily}
+            $hoverFontStyle={props.navItemHoverStyle?.fontStyle}
+            $hoverTextWeight={props.navItemHoverStyle?.textWeight}
+            $hoverTextSize={props.navItemHoverStyle?.textSize}
+            $hoverTextDecoration={props.navItemHoverStyle?.textDecoration}
+            $activeFontFamily={props.navItemActiveStyle?.fontFamily}
+            $activeFontStyle={props.navItemActiveStyle?.fontStyle}
+            $activeTextWeight={props.navItemActiveStyle?.textWeight}
+            $activeTextSize={props.navItemActiveStyle?.textSize}
+            $activeTextDecoration={props.navItemActiveStyle?.textDecoration}
+            $padding={props.navItemStyle?.padding || '0 16px'}
+            $margin={props.navItemStyle?.margin || '0px'}
+            $bg={props.navItemStyle?.background}
+            $hoverBg={props.navItemHoverStyle?.background}
+            $activeBg={props.navItemActiveStyle?.background}
+            $border={props.navItemStyle?.border}
+            $hoverBorder={props.navItemHoverStyle?.border}
+            $activeBorder={props.navItemActiveStyle?.border}
+            $radius={props.navItemStyle?.radius}
             $disabled={disabled}
             onClick={() => { if (!disabled && onEvent) onEvent("click"); }}
           >
@@ -565,7 +598,7 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => {
         );
         if (subMenuItems.length > 0) {
           const subMenu = (
-            <ScrollBar style={{ height: "200px" }}>
+            <ScrollBar style={{ height: "200px", minWidth: "150px" }}>
               <StyledMenu
                 onClick={(e) => {
                   if (disabled) return;
@@ -580,24 +613,33 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => {
                   ...item,
                   icon: item.icon || undefined,
                 }))}
-                $color={(props.subNavItemStyle && props.subNavItemStyle.text) || props.style.text}
-                $hoverColor={(props.subNavItemHoverStyle && props.subNavItemHoverStyle.text) || props.style.accent}
-                $activeColor={(props.subNavItemActiveStyle && props.subNavItemActiveStyle.text) || props.style.accent}
-                $bg={(props.subNavItemStyle && props.subNavItemStyle.background) || undefined}
-                $hoverBg={(props.subNavItemHoverStyle && props.subNavItemHoverStyle.background) || undefined}
-                $activeBg={(props.subNavItemActiveStyle && props.subNavItemActiveStyle.background) || undefined}
-                $border={(props.subNavItemStyle && props.subNavItemStyle.border) || undefined}
-                $hoverBorder={(props.subNavItemHoverStyle && props.subNavItemHoverStyle.border) || undefined}
-                $activeBorder={(props.subNavItemActiveStyle && props.subNavItemActiveStyle.border) || undefined}
-                $radius={(props.subNavItemStyle && props.subNavItemStyle.radius) || undefined}
-                $fontFamily={props.style.fontFamily}
-                $fontStyle={props.style.fontStyle}
-                $textWeight={props.style.textWeight}
-                $textSize={props.style.textSize}
-                $padding={(props.subNavItemStyle && props.subNavItemStyle.padding) || props.style.padding}
-                $margin={(props.subNavItemStyle && props.subNavItemStyle.margin) || props.style.margin}
-                $textTransform={props.style.textTransform}
-                $textDecoration={props.style.textDecoration}
+                $color={props.navItemStyle?.text || props.style.accent}
+                $hoverColor={props.navItemHoverStyle?.text || props.navItemStyle?.text || props.style.accent}
+                $activeColor={props.navItemActiveStyle?.text || props.navItemStyle?.text || props.style.accent}
+                $bg={props.navItemStyle?.background}
+                $hoverBg={props.navItemHoverStyle?.background}
+                $activeBg={props.navItemActiveStyle?.background}
+                $border={props.navItemStyle?.border}
+                $hoverBorder={props.navItemHoverStyle?.border}
+                $activeBorder={props.navItemActiveStyle?.border}
+                $radius={props.navItemStyle?.radius}
+                $fontFamily={props.navItemStyle?.fontFamily || 'sans-serif'}
+                $fontStyle={props.navItemStyle?.fontStyle || 'normal'}
+                $textWeight={props.navItemStyle?.textWeight || '500'}
+                $textSize={props.navItemStyle?.textSize || '14px'}
+                $textDecoration={props.navItemStyle?.textDecoration || 'none'}
+                $hoverFontFamily={props.navItemHoverStyle?.fontFamily}
+                $hoverFontStyle={props.navItemHoverStyle?.fontStyle}
+                $hoverTextWeight={props.navItemHoverStyle?.textWeight}
+                $hoverTextSize={props.navItemHoverStyle?.textSize}
+                $hoverTextDecoration={props.navItemHoverStyle?.textDecoration}
+                $activeFontFamily={props.navItemActiveStyle?.fontFamily}
+                $activeFontStyle={props.navItemActiveStyle?.fontStyle}
+                $activeTextWeight={props.navItemActiveStyle?.textWeight}
+                $activeTextSize={props.navItemActiveStyle?.textSize}
+                $activeTextDecoration={props.navItemActiveStyle?.textDecoration}
+                $padding={props.navItemStyle?.padding || '0 16px'}
+                $margin={props.navItemStyle?.margin || '0px'}
               />
             </ScrollBar>
           );
@@ -679,7 +721,7 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => {
               <DrawerHeader>
                 <DrawerCloseButton
                   aria-label="Close"
-                  $color={props.style.text}
+                  $color={props.navItemStyle?.text || '#333333'}
                   onClick={() => setDrawerVisible(false)}
                 >
                   {hasIcon(props.drawerCloseIcon)
@@ -700,7 +742,6 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => {
     const showLogic = mode === "logic" || mode === "both";
     const showLayout = mode === "layout" || mode === "both";
     const [styleSegment, setStyleSegment] = useState<MenuItemStyleOptionValue>("normal");
-    const [subStyleSegment, setSubStyleSegment] = useState<MenuItemStyleOptionValue>("normal");
 
     return (
       <>
@@ -708,7 +749,7 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => {
         {showLogic && renderInteractionSection(children)}
         {showLayout && renderLayoutSection(children)}
         {showLogic && renderAdvancedSection(children)}
-        {showLayout && renderStyleSections(children, styleSegment, setStyleSegment, subStyleSegment, setSubStyleSegment)}
+        {showLayout && renderStyleSections(children, styleSegment, setStyleSegment)}
       </>
     );
   })
diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
index f2516f881..9a117620d 100644
--- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
+++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
@@ -2017,34 +2017,14 @@ export const CircleProgressStyle = [
 ];
 
 export const NavigationStyle = [
-  ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE.filter(style=>style.name!=='rotation'), "text", [
-    {
-      name: "text",
-      label: trans("text"),
-      depName: "background",
-      depType: DEP_TYPE.CONTRAST_TEXT,
-      transformer: contrastText,
-    },
-    ACCENT,
-    getStaticBackground("#FFFFFF00"),
-  ]),
-  // {
-  //   name: "text",
-  //   label: trans("text"),
-  //   depName: "background",
-  //   depType: DEP_TYPE.CONTRAST_TEXT,
-  //   transformer: contrastText,
-  // },
-  // ACCENT,
-  // getStaticBackground("#FFFFFF00"),
-  // getStaticBorder("#FFFFFF00"),
-  // MARGIN,
-  // PADDING,
-  // FONT_FAMILY,
-  // FONT_STYLE,
-  // TEXT_WEIGHT,
-  // TEXT_SIZE,
-  // BORDER_WIDTH
+  getStaticBackground("#FFFFFF00"),
+  getStaticBorder("#FFFFFF00"),
+  BORDER_STYLE,
+  BORDER_WIDTH,
+  RADIUS,
+  MARGIN,
+  PADDING,
+  ACCENT,
 ] as const;
 
 export const ImageStyle = [
@@ -2390,6 +2370,11 @@ export const NavLayoutItemStyle = [
     depType: DEP_TYPE.CONTRAST_TEXT,
     transformer: contrastText,
   },
+  TEXT_SIZE,
+  TEXT_WEIGHT,
+  FONT_FAMILY,
+  FONT_STYLE,
+  TEXT_DECORATION,
   MARGIN,
   PADDING,
 ] as const;
@@ -2404,6 +2389,11 @@ export const NavLayoutItemHoverStyle = [
     depType: DEP_TYPE.CONTRAST_TEXT,
     transformer: contrastText,
   },
+  TEXT_SIZE,
+  TEXT_WEIGHT,
+  FONT_FAMILY,
+  FONT_STYLE,
+  TEXT_DECORATION,
 ] as const;
 
 export const NavLayoutItemActiveStyle = [
@@ -2416,6 +2406,11 @@ export const NavLayoutItemActiveStyle = [
     depType: DEP_TYPE.CONTRAST_TEXT,
     transformer: contrastText,
   },
+  TEXT_SIZE,
+  TEXT_WEIGHT,
+  FONT_FAMILY,
+  FONT_STYLE,
+  TEXT_DECORATION,
 ] as const;
 
 // Submenu item styles (normal/hover/active), similar to top-level menu items
@@ -2430,6 +2425,11 @@ export const NavSubMenuItemStyle = [
     depType: DEP_TYPE.CONTRAST_TEXT,
     transformer: contrastText,
   },
+  TEXT_SIZE,
+  TEXT_WEIGHT,
+  FONT_FAMILY,
+  FONT_STYLE,
+  TEXT_DECORATION,
   MARGIN,
   PADDING,
 ] as const;
@@ -2444,6 +2444,11 @@ export const NavSubMenuItemHoverStyle = [
     depType: DEP_TYPE.CONTRAST_TEXT,
     transformer: contrastText,
   },
+  TEXT_SIZE,
+  TEXT_WEIGHT,
+  FONT_FAMILY,
+  FONT_STYLE,
+  TEXT_DECORATION,
 ] as const;
 
 export const NavSubMenuItemActiveStyle = [
@@ -2456,6 +2461,11 @@ export const NavSubMenuItemActiveStyle = [
     depType: DEP_TYPE.CONTRAST_TEXT,
     transformer: contrastText,
   },
+  TEXT_SIZE,
+  TEXT_WEIGHT,
+  FONT_FAMILY,
+  FONT_STYLE,
+  TEXT_DECORATION,
 ] as const;
 
 export const CarouselStyle = [getBackground("canvas")] as const;