diff --git a/build-profile.json5 b/build-profile.json5
index 1e69556b3411622cb2e87a87389653bb34f1b148..e5831201f890df877e15dbfdd96c1ec49eebadb0 100644
--- a/build-profile.json5
+++ b/build-profile.json5
@@ -26,8 +26,8 @@
   },
   "modules": [
     {
-      "name": "entry",
-      "srcPath": "./entry",
+      "name": "multinavbarsample",
+      "srcPath": "./multinavbarsample",
       "targets": [
         {
           "name": "default",
@@ -36,6 +36,10 @@
           ]
         }
       ]
+    },
+    {
+      "name": "multinavbarlibrary",
+      "srcPath": "./multinavbarlibrary",
     }
   ]
 }
\ No newline at end of file
diff --git a/entry/src/main/ets/common/utils/BreakpointType.ets b/entry/src/main/ets/common/utils/BreakpointType.ets
deleted file mode 100644
index 698ace59fe8d9006eb37b80ba04efbec5e0f6d3d..0000000000000000000000000000000000000000
--- a/entry/src/main/ets/common/utils/BreakpointType.ets
+++ /dev/null
@@ -1,42 +0,0 @@
-/*
- * Copyright (c) 2025 Huawei Device Co., Ltd.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-export class BreakpointType<T> {
-  private sm: T;
-  private md: T;
-  private lg: T;
-  private xl: T;
-
-  constructor(sm: T, md: T, lg: T, xl: T) {
-    this.sm = sm;
-    this.md = md;
-    this.lg = lg;
-    this.xl = xl;
-  }
-
-  getValue(currentWidthBreakpoint: string): T {
-    let result: T;
-    if (currentWidthBreakpoint === 'sm') {
-      result = this.sm;
-    } else if (currentWidthBreakpoint === 'md') {
-      result = this.md;
-    } else if (currentWidthBreakpoint === 'lg') {
-      result = this.lg;
-    } else {
-      result = this.xl;
-    }
-    return result;
-  }
-}
\ No newline at end of file
diff --git a/entry/src/main/resources/base/element/color.json b/entry/src/main/resources/base/element/color.json
deleted file mode 100644
index 3c712962da3c2751c2b9ddb53559afcbd2b54a02..0000000000000000000000000000000000000000
--- a/entry/src/main/resources/base/element/color.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "color": [
-    {
-      "name": "start_window_background",
-      "value": "#FFFFFF"
-    }
-  ]
-}
\ No newline at end of file
diff --git a/entry/src/main/resources/base/profile/backup_config.json b/entry/src/main/resources/base/profile/backup_config.json
deleted file mode 100644
index 78f40ae7c494d71e2482278f359ec790ca73471a..0000000000000000000000000000000000000000
--- a/entry/src/main/resources/base/profile/backup_config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "allowToBackupRestore": true
-}
\ No newline at end of file
diff --git a/multinavbarlibrary/.gitignore b/multinavbarlibrary/.gitignore
new file mode 100644
index 0000000000000000000000000000000000000000..e2713a2779c5a3e0eb879efe6115455592caeea5
--- /dev/null
+++ b/multinavbarlibrary/.gitignore
@@ -0,0 +1,6 @@
+/node_modules
+/oh_modules
+/.preview
+/build
+/.cxx
+/.test
\ No newline at end of file
diff --git a/multinavbarlibrary/BuildProfile.ets b/multinavbarlibrary/BuildProfile.ets
new file mode 100644
index 0000000000000000000000000000000000000000..3a501e5ddee8ea6d28961648fc7dd314a5304bd4
--- /dev/null
+++ b/multinavbarlibrary/BuildProfile.ets
@@ -0,0 +1,17 @@
+/**
+ * Use these variables when you tailor your ArkTS code. They must be of the const type.
+ */
+export const HAR_VERSION = '1.0.0';
+export const BUILD_MODE_NAME = 'debug';
+export const DEBUG = true;
+export const TARGET_NAME = 'default';
+
+/**
+ * BuildProfile Class is used only for compatibility purposes.
+ */
+export default class BuildProfile { 
+	static readonly HAR_VERSION = HAR_VERSION;
+	static readonly BUILD_MODE_NAME = BUILD_MODE_NAME;
+	static readonly DEBUG = DEBUG;
+	static readonly TARGET_NAME = TARGET_NAME;
+}
\ No newline at end of file
diff --git a/multinavbarlibrary/Index.ets b/multinavbarlibrary/Index.ets
new file mode 100644
index 0000000000000000000000000000000000000000..49ca8101bbc5c80d0cf98f1789b2a97311f70419
--- /dev/null
+++ b/multinavbarlibrary/Index.ets
@@ -0,0 +1 @@
+export { MultiNavBarPage } from './src/main/ets/pages/MultiNavBarPage';
diff --git a/multinavbarlibrary/build-profile.json5 b/multinavbarlibrary/build-profile.json5
new file mode 100644
index 0000000000000000000000000000000000000000..312d38eb08629793b3484c7373213f22840c8d82
--- /dev/null
+++ b/multinavbarlibrary/build-profile.json5
@@ -0,0 +1,28 @@
+{
+  "apiType": "stageMode",
+  "buildOption": {
+  },
+  "buildOptionSet": [
+    {
+      "name": "release",
+      "arkOptions": {
+        "obfuscation": {
+          "ruleOptions": {
+            "enable": true,
+            "files": [
+              "./obfuscation-rules.txt"
+            ]
+          },
+          "consumerFiles": [
+            "./consumer-rules.txt"
+          ]
+        }
+      },
+    },
+  ],
+  "targets": [
+    {
+      "name": "default"
+    }
+  ]
+}
diff --git a/multinavbarlibrary/consumer-rules.txt b/multinavbarlibrary/consumer-rules.txt
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/multinavbarlibrary/hvigorfile.ts b/multinavbarlibrary/hvigorfile.ts
new file mode 100644
index 0000000000000000000000000000000000000000..42187071482d292588ad40babeda74f7b8d97a23
--- /dev/null
+++ b/multinavbarlibrary/hvigorfile.ts
@@ -0,0 +1,6 @@
+import { harTasks } from '@ohos/hvigor-ohos-plugin';
+
+export default {
+    system: harTasks,  /* Built-in plugin of Hvigor. It cannot be modified. */
+    plugins:[]         /* Custom plugin to extend the functionality of Hvigor. */
+}
diff --git a/multinavbarlibrary/obfuscation-rules.txt b/multinavbarlibrary/obfuscation-rules.txt
new file mode 100644
index 0000000000000000000000000000000000000000..272efb6ca3f240859091bbbfc7c5802d52793b0b
--- /dev/null
+++ b/multinavbarlibrary/obfuscation-rules.txt
@@ -0,0 +1,23 @@
+# Define project specific obfuscation rules here.
+# You can include the obfuscation configuration files in the current module's build-profile.json5.
+#
+# For more details, see
+#   https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/source-obfuscation-V5
+
+# Obfuscation options:
+# -disable-obfuscation: disable all obfuscations
+# -enable-property-obfuscation: obfuscate the property names
+# -enable-toplevel-obfuscation: obfuscate the names in the global scope
+# -compact: remove unnecessary blank spaces and all line feeds
+# -remove-log: remove all console.* statements
+# -print-namecache: print the name cache that contains the mapping from the old names to new names
+# -apply-namecache: reuse the given cache file
+
+# Keep options:
+# -keep-property-name: specifies property names that you want to keep
+# -keep-global-name: specifies names that you want to keep in the global scope
+
+-enable-property-obfuscation
+-enable-toplevel-obfuscation
+-enable-filename-obfuscation
+-enable-export-obfuscation
\ No newline at end of file
diff --git a/entry/oh-package.json5 b/multinavbarlibrary/oh-package.json5
similarity index 59%
rename from entry/oh-package.json5
rename to multinavbarlibrary/oh-package.json5
index 248c3b7541a589682a250f86a6d3ecf7414d2d6a..fcc72a95d3bf2897431c215cb6e05ab1c8c852df 100644
--- a/entry/oh-package.json5
+++ b/multinavbarlibrary/oh-package.json5
@@ -1,10 +1,9 @@
 {
-  "name": "entry",
+  "name": "multinavbarlibrary",
   "version": "1.0.0",
   "description": "Please describe the basic information.",
-  "main": "",
+  "main": "Index.ets",
   "author": "",
-  "license": "",
+  "license": "Apache-2.0",
   "dependencies": {}
 }
-
diff --git a/multinavbarlibrary/src/main/ets/common/utils/BreakpointSystem.ets b/multinavbarlibrary/src/main/ets/common/utils/BreakpointSystem.ets
new file mode 100644
index 0000000000000000000000000000000000000000..07997713e2dce332b26c90e719a31b2e511b026b
--- /dev/null
+++ b/multinavbarlibrary/src/main/ets/common/utils/BreakpointSystem.ets
@@ -0,0 +1,118 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { window } from '@kit.ArkUI';
+import type { BusinessError } from '@kit.BasicServicesKit';
+import { hilog } from '@kit.PerformanceAnalysisKit';
+
+const TAG: string = '[BreakpointSystem]';
+
+export enum BreakpointTypeEnum {
+  XS = 'xs',
+  SM = 'sm',
+  MD = 'md',
+  LG = 'lg',
+  XL = 'xl',
+}
+
+export interface BreakpointTypes<T> {
+  xs?: T;
+  sm: T;
+  md: T;
+  lg: T;
+  xl: T;
+}
+
+export class BreakpointType<T> {
+  private xs: T;
+  private sm: T;
+  private md: T;
+  private lg: T;
+  private xl: T;
+
+  public constructor(param: BreakpointTypes<T>) {
+    this.xs = param.xs || param.sm;
+    this.sm = param.sm;
+    this.md = param.md;
+    this.lg = param.lg;
+    this.xl = param.xl;
+  }
+
+  public getValue(currentBreakpoint: string): T {
+    if (currentBreakpoint === BreakpointTypeEnum.XS) {
+      return this.xs;
+    }
+    if (currentBreakpoint === BreakpointTypeEnum.SM) {
+      return this.sm;
+    }
+    if (currentBreakpoint === BreakpointTypeEnum.MD) {
+      return this.md;
+    }
+    if (currentBreakpoint === BreakpointTypeEnum.XL) {
+      return this.xl;
+    }
+    return this.lg;
+  }
+}
+
+export class BreakpointSystem {
+  private static instance: BreakpointSystem;
+  private currentBreakpoint: BreakpointTypeEnum = BreakpointTypeEnum.MD;
+
+  private constructor() {
+  }
+
+  public static getInstance(): BreakpointSystem {
+    if (!BreakpointSystem.instance) {
+      BreakpointSystem.instance = new BreakpointSystem();
+    }
+    return BreakpointSystem.instance;
+  }
+
+  public updateCurrentBreakpoint(breakpoint: BreakpointTypeEnum): void {
+    if (this.currentBreakpoint !== breakpoint) {
+      this.currentBreakpoint = breakpoint;
+      AppStorage.setOrCreate('currentWidthBreakpoint', this.currentBreakpoint);
+    }
+  }
+
+  public onWindowSizeChange(window: window.Window): void {
+    this.updateWidthBp(window);
+  }
+
+  public updateWidthBp(window: window.Window): void {
+    try {
+      const mainWindow: window.WindowProperties = window.getWindowProperties();
+      const windowWidth: number = mainWindow.windowRect.width;
+      const windowWidthVp = px2vp(windowWidth);
+      let widthBp: BreakpointTypeEnum = BreakpointTypeEnum.MD;
+      if (windowWidthVp < 320) {
+        widthBp = BreakpointTypeEnum.XS;
+      } else if (windowWidthVp >= 320 && windowWidthVp < 600) {
+        widthBp = BreakpointTypeEnum.SM;
+      } else if (windowWidthVp >= 600 && windowWidthVp < 840) {
+        widthBp = BreakpointTypeEnum.MD;
+      } else if (windowWidthVp >= 840 && windowWidthVp < 1440) {
+        widthBp = BreakpointTypeEnum.LG;
+      } else {
+        widthBp = BreakpointTypeEnum.XL;
+      }
+      this.updateCurrentBreakpoint(widthBp);
+    } catch (error) {
+      const err: BusinessError = error as BusinessError;
+      hilog.error(0x0000, TAG, `UpdateBreakpoint fail, error code: ${err.code}, message: ${err.message}`);
+    }
+  }
+}
\ No newline at end of file
diff --git a/entry/src/main/ets/common/utils/WindowUtils.ets b/multinavbarlibrary/src/main/ets/common/utils/WindowUtils.ets
similarity index 31%
rename from entry/src/main/ets/common/utils/WindowUtils.ets
rename to multinavbarlibrary/src/main/ets/common/utils/WindowUtils.ets
index a6cbf227e2dea84f65c14a9aa5241c6936387b11..dd767c0a15e75c771f89618f64c07c2e63db9923 100644
--- a/entry/src/main/ets/common/utils/WindowUtils.ets
+++ b/multinavbarlibrary/src/main/ets/common/utils/WindowUtils.ets
@@ -16,64 +16,61 @@
 import { window } from '@kit.ArkUI';
 import { BusinessError, deviceInfo } from '@kit.BasicServicesKit';
 import { hilog } from '@kit.PerformanceAnalysisKit';
+import { BreakpointSystem } from './BreakpointSystem';
 
 const TAG: string = '[WindowUtil]';
 
 export class WindowUtil {
-  static getInstance(): WindowUtil | undefined {
-    if (!AppStorage.get<WindowUtil>('windowUtil')) {
-      AppStorage.setOrCreate('windowUtil', new WindowUtil());
-    } else {
-      hilog.info(0x0000, TAG, 'WindowUtil already exists.');
-    }
-    return AppStorage.get<WindowUtil>('windowUtil');
-  }
-
-  static setStatusBarHeight(context: Context, avoidArea?: window.AvoidArea): void {
-    window.getLastWindow(context).then((data: window.Window) => {
+  public static requestFullScreen(windowStage: window.WindowStage): void {
+    windowStage.getMainWindow((err: BusinessError, data: window.Window) => {
+      if (err.code) {
+        return;
+      }
+      const windowClass: window.Window = data;
+      // Realize the immersive effect.
       try {
-        let naviBarArea: window.AvoidArea = data.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR);
-        let statusBarHeight: number = 0;
-        let naviIndicatorHeight: number = 0;
-        if (avoidArea) {
-          statusBarHeight = avoidArea.topRect.height;
-        } else {
-          let area: window.AvoidArea = data.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM);
-          statusBarHeight = area.topRect.height;
-        }
-        statusBarHeight = px2vp(statusBarHeight);
-        naviIndicatorHeight = px2vp(naviBarArea.bottomRect.height);
-        AppStorage.setOrCreate('statusBarHeight', statusBarHeight);
-        AppStorage.setOrCreate('naviIndicatorHeight', naviIndicatorHeight);
-      } catch (error) {
-        hilog.error(0x0000, TAG, 'Get and set DeviceSize failed. Cause: ' + (error as BusinessError).message);
+        const promise: Promise<void> = windowClass.setWindowLayoutFullScreen(true);
+        promise.then(() => {
+          hilog.info(0x0000, TAG, 'Succeeded in setting the window layout to full-screen mode.');
+        }).catch((err: BusinessError) => {
+          hilog.info(0x0000, TAG,
+            `Failed to set the window layout to full-screen mode. Cause: ${err.code}, ${err.message}`);
+        });
+      } catch {
+        hilog.error(0x0000, TAG, 'Failed to set the window layout to full-screen mode. ');
       }
-    }).catch((error: BusinessError) => {
-      hilog.error(0x0000, TAG, `Failed to get last window. Cause: ${error.message}`);
     });
   }
 
-  updateWidthBp(windowWidth: number): void {
-    try {
-      let windowWidthVp = px2vp(windowWidth);
-      if (deviceInfo.deviceType === '2in1') {
-        windowWidthVp -= 2 * 5.4;
+  public static registerBreakPoint(windowStage: window.WindowStage) {
+    windowStage.getMainWindow((err: BusinessError, data: window.Window) => {
+      if (err.code) {
+        hilog.error(0x0000, TAG, `Failed to get main window: ${err.message}`);
+        return;
       }
-      let widthBp: string = '';
-      if (windowWidthVp < 320) {
-        widthBp = 'xs';
-      } else if (windowWidthVp >= 320 && windowWidthVp < 600) {
-        widthBp = 'sm';
-      } else if (windowWidthVp >= 600 && windowWidthVp < 840) {
-        widthBp = 'md';
-      } else if (windowWidthVp >= 840 && windowWidthVp < 1440) {
-        widthBp = 'lg';
+      BreakpointSystem.getInstance().updateWidthBp(data);
+      data.on('windowSizeChange', () => BreakpointSystem.getInstance().onWindowSizeChange(data));
+      if (deviceInfo.deviceType === '2in1') {
+        data.setWindowDecorVisible(false);
+        data.setWindowDecorHeight(64);
       } else {
-        widthBp = 'xl';
+        WindowUtil.requestFullScreen(windowStage)
+        data.on('avoidAreaChange', (avoidAreaOption) => {
+          if (avoidAreaOption.type === window.AvoidAreaType.TYPE_SYSTEM ||
+            avoidAreaOption.type === window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR) {
+            WindowUtil.setAvoidArea(avoidAreaOption.type, avoidAreaOption.area);
+          }
+        });
       }
-      AppStorage.setOrCreate('currentWidthBreakpoint', widthBp);
-    } catch (error) {
-      hilog.error(0x0000, TAG, 'updateWidthBp failed. Cause: ' + (error as BusinessError).message);
+    })
+  }
+
+  // Get status bar height and indicator height.
+  public static setAvoidArea(type: window.AvoidAreaType, area: window.AvoidArea) {
+    if (type === window.AvoidAreaType.TYPE_SYSTEM) {
+      AppStorage.setOrCreate('statusBarHeight', px2vp(area.topRect.height));
+    } else {
+      AppStorage.setOrCreate('naviIndicatorHeight', px2vp(area.bottomRect.height));
     }
   }
 }
\ No newline at end of file
diff --git a/entry/src/main/ets/model/TabDataModel.ets b/multinavbarlibrary/src/main/ets/model/TabDataModel.ets
similarity index 100%
rename from entry/src/main/ets/model/TabDataModel.ets
rename to multinavbarlibrary/src/main/ets/model/TabDataModel.ets
diff --git a/entry/src/main/ets/model/VideoDataModel.ets b/multinavbarlibrary/src/main/ets/model/VideoDataModel.ets
similarity index 100%
rename from entry/src/main/ets/model/VideoDataModel.ets
rename to multinavbarlibrary/src/main/ets/model/VideoDataModel.ets
diff --git a/multinavbarlibrary/src/main/ets/pages/MultiNavBarPage.ets b/multinavbarlibrary/src/main/ets/pages/MultiNavBarPage.ets
new file mode 100644
index 0000000000000000000000000000000000000000..1ea96f047be73559f773f3a4ce1032ca1350c211
--- /dev/null
+++ b/multinavbarlibrary/src/main/ets/pages/MultiNavBarPage.ets
@@ -0,0 +1,13 @@
+import { Home } from "../view/Home"
+
+@Component
+export struct MultiNavBarPage {
+
+  build() {
+    Column() {
+      Home()
+    }
+    .width('100%')
+    .height('100%')
+  }
+}
diff --git a/entry/src/main/ets/view/Home.ets b/multinavbarlibrary/src/main/ets/view/Home.ets
similarity index 100%
rename from entry/src/main/ets/view/Home.ets
rename to multinavbarlibrary/src/main/ets/view/Home.ets
diff --git a/entry/src/main/ets/view/SideBarView.ets b/multinavbarlibrary/src/main/ets/view/SideBarView.ets
similarity index 100%
rename from entry/src/main/ets/view/SideBarView.ets
rename to multinavbarlibrary/src/main/ets/view/SideBarView.ets
diff --git a/entry/src/main/ets/view/TopTabView.ets b/multinavbarlibrary/src/main/ets/view/TopTabView.ets
similarity index 87%
rename from entry/src/main/ets/view/TopTabView.ets
rename to multinavbarlibrary/src/main/ets/view/TopTabView.ets
index e10257fdddda77522939d5010114893ed92a6578..c0b9a42c290ced9ef03ce1bd7204a5dff70e9d9e 100644
--- a/entry/src/main/ets/view/TopTabView.ets
+++ b/multinavbarlibrary/src/main/ets/view/TopTabView.ets
@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-import { BreakpointType } from '../common/utils/BreakpointType';
+import { BreakpointType } from '../common/utils/BreakpointSystem';
 import { TabDataModel } from '../model/TabDataModel';
 import { VideoInfoView } from './VideoInfoView';
 import { hilog } from '@kit.PerformanceAnalysisKit';
@@ -53,7 +53,7 @@ export struct TopTabView {
           }
           .align(Alignment.Center)
           .padding({
-            right: new BreakpointType(8, 12, 18, 0).getValue(this.currentWidthBreakpoint)
+            right: new BreakpointType({sm:8, md:12, lg:18, xl:0}).getValue(this.currentWidthBreakpoint)
           })
           .onClick(() => {
             this.secondLevelIndex = index;
@@ -63,8 +63,8 @@ export struct TopTabView {
       .scrollBar(BarState.Off)
       .listDirection(Axis.Horizontal)
       .padding({
-        left: new BreakpointType(16, 24, 36, 24).getValue(this.currentWidthBreakpoint),
-        right: new BreakpointType(16, 24, 36, 24).getValue(this.currentWidthBreakpoint),
+        left: new BreakpointType({sm:16, md:24, lg:36, xl:24}).getValue(this.currentWidthBreakpoint),
+        right: new BreakpointType({sm:16, md:24, lg:36, xl:24}).getValue(this.currentWidthBreakpoint),
         top: $r('sys.float.padding_level5')
       })
       .height(56)
diff --git a/entry/src/main/ets/view/VideoInfoView.ets b/multinavbarlibrary/src/main/ets/view/VideoInfoView.ets
similarity index 71%
rename from entry/src/main/ets/view/VideoInfoView.ets
rename to multinavbarlibrary/src/main/ets/view/VideoInfoView.ets
index cf22a2fcf902198f0ca06d32e873f2d727ccba4b..da7f559ce6792e4ca919ee5531d83ee77e8f34bf 100644
--- a/entry/src/main/ets/view/VideoInfoView.ets
+++ b/multinavbarlibrary/src/main/ets/view/VideoInfoView.ets
@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-import { BreakpointType } from '../common/utils/BreakpointType';
+import { BreakpointType } from '../common/utils/BreakpointSystem';
 import { VideoViewModel } from '../viewmodel/VideoViewModel';
 
 @Component
@@ -39,7 +39,7 @@ export struct VideoInfoView {
               .borderRadius(12)
               .backgroundColor($r('sys.color.ohos_id_color_click_effect'))
               .margin({
-                top: new BreakpointType(10, 10, 12, 11).getValue(this.currentWidthBreakpoint),
+                top: new BreakpointType({sm:10, md:10, lg:12, xl:11}).getValue(this.currentWidthBreakpoint),
                 bottom: 6
               })
 
@@ -57,16 +57,16 @@ export struct VideoInfoView {
     }
     .layoutWeight(1)
     .scrollBar(BarState.Off)
-    .columnsTemplate(new BreakpointType('1fr 1fr', '1fr 1fr 1fr', '1fr 1fr 1fr 1fr', '1fr 1fr 1fr')
+    .columnsTemplate(new BreakpointType({sm:'1fr 1fr', md:'1fr 1fr 1fr', lg:'1fr 1fr 1fr 1fr', xl:'1fr 1fr 1fr'})
       .getValue(this.currentWidthBreakpoint))
     .width('100%')
-    .rowsGap(new BreakpointType(12, 16, 16, 16).getValue(this.currentWidthBreakpoint))
-    .columnsGap(new BreakpointType(16, 12, 16, 16).getValue(this.currentWidthBreakpoint))
+    .rowsGap(new BreakpointType({sm:12, md:16, lg:16, xl:16}).getValue(this.currentWidthBreakpoint))
+    .columnsGap(new BreakpointType({sm:16, md:12, lg:16, xl:16}).getValue(this.currentWidthBreakpoint))
     .padding({
-      left: new BreakpointType(16, 24, 36, 24).getValue(this.currentWidthBreakpoint),
-      right: new BreakpointType(16, 24, 36, 24).getValue(this.currentWidthBreakpoint),
+      left: new BreakpointType({sm:16, md:24, lg:36, xl:24}).getValue(this.currentWidthBreakpoint),
+      right: new BreakpointType({sm:16, md:24, lg:36, xl:24}).getValue(this.currentWidthBreakpoint),
       top: 12,
-      bottom: new BreakpointType(6, 6, 20, 20).getValue(this.currentWidthBreakpoint)
+      bottom: new BreakpointType({sm:6, md:6, lg:20, xl:20}).getValue(this.currentWidthBreakpoint)
     })
   }
 }
\ No newline at end of file
diff --git a/entry/src/main/ets/viewmodel/TabViewModel.ets b/multinavbarlibrary/src/main/ets/viewmodel/TabViewModel.ets
similarity index 100%
rename from entry/src/main/ets/viewmodel/TabViewModel.ets
rename to multinavbarlibrary/src/main/ets/viewmodel/TabViewModel.ets
diff --git a/entry/src/main/ets/viewmodel/VideoViewModel.ets b/multinavbarlibrary/src/main/ets/viewmodel/VideoViewModel.ets
similarity index 100%
rename from entry/src/main/ets/viewmodel/VideoViewModel.ets
rename to multinavbarlibrary/src/main/ets/viewmodel/VideoViewModel.ets
diff --git a/multinavbarlibrary/src/main/module.json5 b/multinavbarlibrary/src/main/module.json5
new file mode 100644
index 0000000000000000000000000000000000000000..ef4e58ee9ce13429872462c21c2b34652eed8b4f
--- /dev/null
+++ b/multinavbarlibrary/src/main/module.json5
@@ -0,0 +1,11 @@
+{
+  "module": {
+    "name": "multinavbarlibrary",
+    "type": "har",
+    "deviceTypes": [
+      "default",
+      "tablet",
+      "2in1"
+    ]
+  }
+}
diff --git a/entry/src/main/resources/dark/element/color.json b/multinavbarlibrary/src/main/resources/base/element/color.json
similarity index 100%
rename from entry/src/main/resources/dark/element/color.json
rename to multinavbarlibrary/src/main/resources/base/element/color.json
diff --git a/entry/src/main/resources/base/element/string.json b/multinavbarlibrary/src/main/resources/base/element/string.json
similarity index 100%
rename from entry/src/main/resources/base/element/string.json
rename to multinavbarlibrary/src/main/resources/base/element/string.json
diff --git a/entry/src/main/resources/base/media/arrow_down.png b/multinavbarlibrary/src/main/resources/base/media/arrow_down.png
similarity index 100%
rename from entry/src/main/resources/base/media/arrow_down.png
rename to multinavbarlibrary/src/main/resources/base/media/arrow_down.png
diff --git a/entry/src/main/resources/base/media/background.png b/multinavbarlibrary/src/main/resources/base/media/background.png
similarity index 100%
rename from entry/src/main/resources/base/media/background.png
rename to multinavbarlibrary/src/main/resources/base/media/background.png
diff --git a/entry/src/main/resources/base/media/chevron_up.svg b/multinavbarlibrary/src/main/resources/base/media/chevron_up.svg
similarity index 100%
rename from entry/src/main/resources/base/media/chevron_up.svg
rename to multinavbarlibrary/src/main/resources/base/media/chevron_up.svg
diff --git a/entry/src/main/resources/base/media/foreground.png b/multinavbarlibrary/src/main/resources/base/media/foreground.png
similarity index 100%
rename from entry/src/main/resources/base/media/foreground.png
rename to multinavbarlibrary/src/main/resources/base/media/foreground.png
diff --git a/entry/src/main/resources/base/media/ic_video_1.png b/multinavbarlibrary/src/main/resources/base/media/ic_video_1.png
similarity index 100%
rename from entry/src/main/resources/base/media/ic_video_1.png
rename to multinavbarlibrary/src/main/resources/base/media/ic_video_1.png
diff --git a/entry/src/main/resources/base/media/ic_video_2.png b/multinavbarlibrary/src/main/resources/base/media/ic_video_2.png
similarity index 100%
rename from entry/src/main/resources/base/media/ic_video_2.png
rename to multinavbarlibrary/src/main/resources/base/media/ic_video_2.png
diff --git a/entry/src/main/resources/base/media/ic_video_3.png b/multinavbarlibrary/src/main/resources/base/media/ic_video_3.png
similarity index 100%
rename from entry/src/main/resources/base/media/ic_video_3.png
rename to multinavbarlibrary/src/main/resources/base/media/ic_video_3.png
diff --git a/entry/src/main/resources/base/media/ic_video_4.png b/multinavbarlibrary/src/main/resources/base/media/ic_video_4.png
similarity index 100%
rename from entry/src/main/resources/base/media/ic_video_4.png
rename to multinavbarlibrary/src/main/resources/base/media/ic_video_4.png
diff --git a/entry/src/main/resources/base/media/layered_image.json b/multinavbarlibrary/src/main/resources/base/media/layered_image.json
similarity index 100%
rename from entry/src/main/resources/base/media/layered_image.json
rename to multinavbarlibrary/src/main/resources/base/media/layered_image.json
diff --git a/entry/src/main/resources/base/media/startIcon.png b/multinavbarlibrary/src/main/resources/base/media/startIcon.png
similarity index 100%
rename from entry/src/main/resources/base/media/startIcon.png
rename to multinavbarlibrary/src/main/resources/base/media/startIcon.png
diff --git a/entry/src/main/resources/en_US/element/string.json b/multinavbarlibrary/src/main/resources/en_US/element/string.json
similarity index 100%
rename from entry/src/main/resources/en_US/element/string.json
rename to multinavbarlibrary/src/main/resources/en_US/element/string.json
diff --git a/entry/src/main/resources/zh_CN/element/string.json b/multinavbarlibrary/src/main/resources/zh_CN/element/string.json
similarity index 100%
rename from entry/src/main/resources/zh_CN/element/string.json
rename to multinavbarlibrary/src/main/resources/zh_CN/element/string.json
diff --git a/entry/build-profile.json5 b/multinavbarsample/build-profile.json5
similarity index 90%
rename from entry/build-profile.json5
rename to multinavbarsample/build-profile.json5
index b695582d3680556f4cce2ec518f65720a9413ca3..808380f3b726e2036a3d6cf5fb9b0fd9513a8215 100644
--- a/entry/build-profile.json5
+++ b/multinavbarsample/build-profile.json5
@@ -20,9 +20,6 @@
   "targets": [
     {
       "name": "default"
-    },
-    {
-      "name": "ohosTest",
     }
   ]
 }
\ No newline at end of file
diff --git a/entry/hvigorfile.ts b/multinavbarsample/hvigorfile.ts
similarity index 100%
rename from entry/hvigorfile.ts
rename to multinavbarsample/hvigorfile.ts
diff --git a/entry/obfuscation-rules.txt b/multinavbarsample/obfuscation-rules.txt
similarity index 100%
rename from entry/obfuscation-rules.txt
rename to multinavbarsample/obfuscation-rules.txt
diff --git a/multinavbarsample/oh-package.json5 b/multinavbarsample/oh-package.json5
new file mode 100644
index 0000000000000000000000000000000000000000..82c234286109faae6ccade670d0096afd5858edd
--- /dev/null
+++ b/multinavbarsample/oh-package.json5
@@ -0,0 +1,11 @@
+{
+  "name": "multinavbarsample",
+  "version": "1.0.0",
+  "description": "Please describe the basic information.",
+  "main": "",
+  "author": "",
+  "license": "",
+  "dependencies": {
+    "multinavbarlibrary": "file:../multinavbarlibrary"
+  }
+}
\ No newline at end of file
diff --git a/entry/src/main/ets/entryability/EntryAbility.ets b/multinavbarsample/src/main/ets/entryability/EntryAbility.ets
similarity index 50%
rename from entry/src/main/ets/entryability/EntryAbility.ets
rename to multinavbarsample/src/main/ets/entryability/EntryAbility.ets
index de5da3875d7b897f8873668e0cad47cf78d3544b..c1acff5966e36ee2544bebb1a2de9b81594aa91b 100644
--- a/entry/src/main/ets/entryability/EntryAbility.ets
+++ b/multinavbarsample/src/main/ets/entryability/EntryAbility.ets
@@ -17,12 +17,11 @@ import { ConfigurationConstant, UIAbility } from '@kit.AbilityKit';
 import { window } from '@kit.ArkUI';
 import { BusinessError, deviceInfo } from '@kit.BasicServicesKit';
 import { hilog } from '@kit.PerformanceAnalysisKit';
-import { WindowUtil } from '../common/utils/WindowUtils';
+import { WindowUtil } from 'multinavbarlibrary/src/main/ets/common/utils/WindowUtils';
 
 const TAG: string = '[EntryAbility]';
 
 export default class EntryAbility extends UIAbility {
-  private windowUtil?: WindowUtil = WindowUtil.getInstance();
 
   onCreate(): void {
     hilog.info(0x0000, TAG, 'Ability onCreate');
@@ -38,33 +37,6 @@ export default class EntryAbility extends UIAbility {
       }
       hilog.info(0x0000, TAG, 'Succeeded in loading the content.');
     });
-    let windowClass: window.Window | undefined = undefined;
-    windowStage.getMainWindow((err: BusinessError, data: window.Window) => {
-      if (err.code) {
-        hilog.error(0x0000, TAG, `Failed to get the main window. Cause: ${err.message}`);
-        return;
-      }
-      try {
-        this.windowUtil!.updateWidthBp(data.getWindowProperties().windowRect.width);
-        data.on('windowSizeChange', (windowSize) => {
-          this.windowUtil!.updateWidthBp(windowSize.width);
-        });
-        windowClass = data;
-        if (deviceInfo.deviceType === '2in1') {
-          data.setWindowDecorVisible(false);
-          data.setWindowDecorHeight(64);
-        } else {
-          windowClass.setWindowLayoutFullScreen(true).then(() => {
-            hilog.info(0x0000, TAG, 'Succeeded in setting the window layout to full-screen mode.');
-          }).catch((err: BusinessError) => {
-            hilog.error(0x0000, TAG, `Failed to set the window layout to full-screen mode. Cause: ${err.message}`);
-          });
-          let area: window.AvoidArea = windowClass.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM);
-          WindowUtil.setStatusBarHeight(this.context, area);
-        }
-      } catch (error) {
-        hilog.error(0x0000, TAG, 'Failed to get the main window. Cause' + (error as BusinessError).message);
-      }
-    });
+    WindowUtil.registerBreakPoint(windowStage)
   }
 }
\ No newline at end of file
diff --git a/entry/src/main/ets/pages/Index.ets b/multinavbarsample/src/main/ets/pages/Index.ets
similarity index 86%
rename from entry/src/main/ets/pages/Index.ets
rename to multinavbarsample/src/main/ets/pages/Index.ets
index ca14ff77fbf2dd7e2869a735c642729cd09a3ec4..1d5e4ed5a6a79183525ff468e2319b449238ed6d 100644
--- a/entry/src/main/ets/pages/Index.ets
+++ b/multinavbarsample/src/main/ets/pages/Index.ets
@@ -13,16 +13,14 @@
  * limitations under the License.
  */
 
-import { Home } from '../view/Home';
+import { MultiNavBarPage } from 'multinavbarlibrary';
 
 @Entry
 @Component
 struct Index {
   build() {
-    Column() {
-      Home()
+    Stack() {
+      MultiNavBarPage()
     }
-    .width('100%')
-    .height('100%')
   }
 }
\ No newline at end of file
diff --git a/entry/src/main/module.json5 b/multinavbarsample/src/main/module.json5
similarity index 89%
rename from entry/src/main/module.json5
rename to multinavbarsample/src/main/module.json5
index 8bf7660f587a306c40ce88a045333da327c82f82..eedde12399c677e35ea063fbd6fde5ec560a5101 100644
--- a/entry/src/main/module.json5
+++ b/multinavbarsample/src/main/module.json5
@@ -1,6 +1,6 @@
 {
   "module": {
-    "name": "entry",
+    "name": "multinavbarsample",
     "type": "entry",
     "description": "$string:module_desc",
     "mainElement": "EntryAbility",
@@ -14,14 +14,14 @@
     "pages": "$profile:main_pages",
     "abilities": [
       {
-        "name": "EntryAbility",
+        "name": "MultinavbarsampleAbility",
         "srcEntry": "./ets/entryability/EntryAbility.ets",
         "description": "$string:EntryAbility_desc",
         "icon": "$media:layered_image",
         "label": "$string:EntryAbility_label",
         "startWindowIcon": "$media:startIcon",
         "startWindowBackground": "$color:start_window_background",
-        "exported": false,
+        "exported": true,
         "minWindowWidth": 1452,
         "skills": [
           {
diff --git a/entry/src/main/resources/base/profile/main_pages.json b/multinavbarsample/src/main/resources/base/profile/main_pages.json
similarity index 100%
rename from entry/src/main/resources/base/profile/main_pages.json
rename to multinavbarsample/src/main/resources/base/profile/main_pages.json