diff --git a/example/qml-Qt6/App.qml b/example/qml-Qt6/App.qml
index f0af5371..70bc1c7a 100644
--- a/example/qml-Qt6/App.qml
+++ b/example/qml-Qt6/App.qml
@@ -35,7 +35,8 @@ Window {
             "/hotload":"qrc:/example/qml/window/HotloadWindow.qml",
             "/singleTaskWindow":"qrc:/example/qml/window/SingleTaskWindow.qml",
             "/standardWindow":"qrc:/example/qml/window/StandardWindow.qml",
-            "/singleInstanceWindow":"qrc:/example/qml/window/SingleInstanceWindow.qml"
+            "/singleInstanceWindow":"qrc:/example/qml/window/SingleInstanceWindow.qml",
+            "/pageWindow":"qrc:/example/qml/window/PageWindow.qml"
         }
         FluApp.initialRoute = "/"
         FluApp.httpInterceptor = interceptor
diff --git a/example/qml-Qt6/global/ItemsFooter.qml b/example/qml-Qt6/global/ItemsFooter.qml
index c6742d06..80c2fb7c 100644
--- a/example/qml-Qt6/global/ItemsFooter.qml
+++ b/example/qml-Qt6/global/ItemsFooter.qml
@@ -14,7 +14,8 @@ FluObject{
     FluPaneItem{
         title:lang.about
         icon:FluentIcons.Contact
-        tapFunc:function(){
+        onDropped: { FluApp.navigate("/about") }
+        onTapListener:function(){
             FluApp.navigate("/about")
         }
     }
@@ -22,8 +23,10 @@ FluObject{
     FluPaneItem{
         title:lang.settings
         icon:FluentIcons.Settings
+        url:"qrc:/example/qml/page/T_Settings.qml"
+        onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
         onTap:{
-            navigationView.push("qrc:/example/qml/page/T_Settings.qml")
+            navigationView.push(url)
         }
     }
 
diff --git a/example/qml-Qt6/global/ItemsOriginal.qml b/example/qml-Qt6/global/ItemsOriginal.qml
index 3f3beb48..8bb7b23e 100644
--- a/example/qml-Qt6/global/ItemsOriginal.qml
+++ b/example/qml-Qt6/global/ItemsOriginal.qml
@@ -21,11 +21,13 @@ FluObject{
             count: item_home.count
         }
         icon:FluentIcons.Home
+        url:"qrc:/example/qml/page/T_Home.qml"
+        onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
         onTap:{
             if(navigationView.getCurrentUrl()){
                 item_home.count = 0
             }
-            navigationView.push("qrc:/example/qml/page/T_Home.qml")
+            navigationView.push(url)
         }
         editDelegate: FluTextBox{
             text:item_home.title
@@ -69,9 +71,11 @@ FluObject{
             image:"qrc:/example/res/image/control/Button.png"
             recentlyUpdated:true
             desc:"A control that responds to user input and raisesa Click event."
+            url:"qrc:/example/qml/page/T_Buttons.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{
                 item_buttons.count = 0
-                navigationView.push("qrc:/example/qml/page/T_Buttons.qml")
+                navigationView.push(url)
             }
         }
         FluPaneItem{
@@ -82,46 +86,45 @@ FluObject{
                 count: item_text.count
                 color: Qt.rgba(82/255,196/255,26/255,1)
             }
-            onTap:{
-                item_text.count = 0
-                navigationView.push("qrc:/example/qml/page/T_Text.qml")
-            }
+            url:"qrc:/example/qml/page/T_Text.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Image"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Image.qml")
-            }
+            url:"qrc:/example/qml/page/T_Image.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Slider"
             image:"qrc:/example/res/image/control/Slider.png"
             recentlyUpdated:true
             desc:"A control that lets the user select from a rangeof values by moving a Thumb control along atrack."
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Slider.qml")
-            }
+            url:"qrc:/example/qml/page/T_Slider.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"CheckBox"
             image:"qrc:/example/res/image/control/Checkbox.png"
             recentlyUpdated:true
             desc:"A control that a user can select or clear."
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_CheckBox.qml")
-            }
+            url:"qrc:/example/qml/page/T_CheckBox.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"RadioButton"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_RadioButton.qml")
-            }
+            url:"qrc:/example/qml/page/T_RadioButton.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"ToggleSwitch"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_ToggleSwitch.qml")
-            }
+            url:"qrc:/example/qml/page/T_ToggleSwitch.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
     }
 
@@ -130,33 +133,33 @@ FluObject{
         icon:FluentIcons.GridView
         FluPaneItem{
             title:"TextBox"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_TextBox.qml")
-            }
+            url:"qrc:/example/qml/page/T_TextBox.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"TimePicker"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_TimePicker.qml")
-            }
+            url:"qrc:/example/qml/page/T_TimePicker.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"DatePicker"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_DatePicker.qml")
-            }
+            url:"qrc:/example/qml/page/T_DatePicker.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"CalendarPicker"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_CalendarPicker.qml")
-            }
+            url:"qrc:/example/qml/page/T_CalendarPicker.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"ColorPicker"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_ColorPicker.qml")
-            }
+            url:"qrc:/example/qml/page/T_ColorPicker.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
     }
 
@@ -168,57 +171,57 @@ FluObject{
             image:"qrc:/example/res/image/control/InfoBar.png"
             recentlyUpdated:true
             desc:"An inline message to display app-wide statuschange information."
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_InfoBar.qml")
-            }
+            url:"qrc:/example/qml/page/T_InfoBar.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Progress"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Progress.qml")
-            }
+            url:"qrc:/example/qml/page/T_Progress.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"RatingControl"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_RatingControl.qml")
-            }
+            url:"qrc:/example/qml/page/T_RatingControl.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Badge"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Badge.qml")
-            }
+            url:"qrc:/example/qml/page/T_Badge.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Rectangle"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Rectangle.qml")
-            }
+            url:"qrc:/example/qml/page/T_Rectangle.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"StatusView"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_StatusView.qml")
-            }
+            url:"qrc:/example/qml/page/T_StatusView.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Carousel"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Carousel.qml")
-            }
+            url:"qrc:/example/qml/page/T_Carousel.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Expander"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Expander.qml")
-            }
+            url:"qrc:/example/qml/page/T_Expander.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Watermark"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Watermark.qml")
-            }
+            url:"qrc:/example/qml/page/T_Watermark.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
     }
 
@@ -227,9 +230,9 @@ FluObject{
         icon:FluentIcons.ButtonMenu
         FluPaneItem{
             title:"Dialog"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Dialog.qml")
-            }
+            url:"qrc:/example/qml/page/T_Dialog.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             id:item_combobox
@@ -239,6 +242,8 @@ FluObject{
                 count: item_combobox.count
                 color: Qt.rgba(250/255,173/255,20/255,1)
             }
+            url:"qrc:/example/qml/page/T_ComboBox.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{
                 item_combobox.count = 0
                 navigationView.push("qrc:/example/qml/page/T_ComboBox.qml")
@@ -246,15 +251,15 @@ FluObject{
         }
         FluPaneItem{
             title:"Tooltip"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Tooltip.qml")
-            }
+            url:"qrc:/example/qml/page/T_Tooltip.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Menu"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Menu.qml")
-            }
+            url:"qrc:/example/qml/page/T_Menu.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
     }
 
@@ -267,15 +272,15 @@ FluObject{
             recentlyAdded:true
             order:3
             desc:"Presents information from different sources in atabbed view."
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Pivot.qml")
-            }
+            url:"qrc:/example/qml/page/T_Pivot.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"BreadcrumbBar"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_BreadcrumbBar.qml")
-            }
+            url:"qrc:/example/qml/page/T_BreadcrumbBar.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"TabView"
@@ -283,15 +288,15 @@ FluObject{
             recentlyAdded:true
             order:1
             desc:"A control that displays a collection of tabs thatcan be used to display several documents."
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_TabView.qml")
-            }
+            url:"qrc:/example/qml/page/T_TabView.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"TreeView"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_TreeView.qml")
-            }
+            url:"qrc:/example/qml/page/T_TreeView.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"TableView"
@@ -299,21 +304,21 @@ FluObject{
             recentlyAdded:true
             order:4
             desc:"The TableView control provides a flexible way to display a collection of data in rows and columns"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_TableView.qml")
-            }
+            url:"qrc:/example/qml/page/T_TableView.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Pagination"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Pagination.qml")
-            }
+            url:"qrc:/example/qml/page/T_Pagination.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"MultiWindow"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_MultiWindow.qml")
-            }
+            url:"qrc:/example/qml/page/T_MultiWindow.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"FlipView"
@@ -321,9 +326,9 @@ FluObject{
             recentlyAdded:true
             order:2
             desc:"Presents a collection of items that the user canflip through, one item at a time."
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_FlipView.qml")
-            }
+            url:"qrc:/example/qml/page/T_FlipView.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
     }
 
@@ -332,27 +337,27 @@ FluObject{
         icon:FluentIcons.Brightness
         FluPaneItem{
             title:"Acrylic"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Acrylic.qml")
-            }
+            url:"qrc:/example/qml/page/T_Acrylic.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Theme"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Theme.qml")
-            }
+            url:"qrc:/example/qml/page/T_Theme.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Typography"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Typography.qml")
-            }
+            url:"qrc:/example/qml/page/T_Typography.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Awesome"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Awesome.qml")
-            }
+            url:"qrc:/example/qml/page/T_Awesome.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
     }
 
@@ -366,45 +371,45 @@ FluObject{
         icon:FluentIcons.Shop
         FluPaneItem{
             title:"QRCode"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_QRCode.qml")
-            }
+            url:"qrc:/example/qml/page/T_QRCode.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Tour"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Tour.qml")
-            }
+            url:"qrc:/example/qml/page/T_Tour.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Timeline"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Timeline.qml")
-            }
+            url:"qrc:/example/qml/page/T_Timeline.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Screenshot"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Screenshot.qml")
-            }
+            url:"qrc:/example/qml/page/T_Screenshot.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Captcha"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Captcha.qml")
-            }
+            url:"qrc:/example/qml/page/T_Captcha.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Chart"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Chart.qml")
-            }
+            url:"qrc:/example/qml/page/T_Chart.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Http"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Http.qml")
-            }
+            url:"qrc:/example/qml/page/T_Http.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             id:item_other
@@ -414,6 +419,8 @@ FluObject{
                 count: item_other.count
                 color: Qt.rgba(82/255,196/255,26/255,1)
             }
+            url:"qrc:/example/qml/page/T_RemoteLoader.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{
                 item_other.count = 0
                 navigationView.push("qrc:/example/qml/page/T_RemoteLoader.qml")
@@ -421,9 +428,10 @@ FluObject{
         }
         FluPaneItem{
             title:"HotLoader"
-            tapFunc:function(){
+            onTapListener:function(){
                 FluApp.navigate("/hotload")
             }
+            onDropped:{ FluApp.navigate("/hotload") }
         }
     }
 
diff --git a/example/qml-Qt6/window/PageWindow.qml b/example/qml-Qt6/window/PageWindow.qml
new file mode 100644
index 00000000..4ff91142
--- /dev/null
+++ b/example/qml-Qt6/window/PageWindow.qml
@@ -0,0 +1,25 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import FluentUI
+import example
+import "qrc:///example/qml/component"
+
+CustomWindow {
+
+    id:window
+    width: 800
+    height: 600
+    minimumWidth: 520
+    minimumHeight: 200
+    launchMode: FluWindowType.SingleInstance
+    onInitArgument:
+        (arg)=>{
+            window.title = arg.title
+            loader.setSource( arg.url,{animDisabled:true})
+        }
+    Loader{
+        id: loader
+        anchors.fill: parent
+    }
+}
diff --git a/example/qml/App.qml b/example/qml/App.qml
index 08960754..0060ec77 100644
--- a/example/qml/App.qml
+++ b/example/qml/App.qml
@@ -35,7 +35,8 @@ Window {
             "/hotload":"qrc:/example/qml/window/HotloadWindow.qml",
             "/singleTaskWindow":"qrc:/example/qml/window/SingleTaskWindow.qml",
             "/standardWindow":"qrc:/example/qml/window/StandardWindow.qml",
-            "/singleInstanceWindow":"qrc:/example/qml/window/SingleInstanceWindow.qml"
+            "/singleInstanceWindow":"qrc:/example/qml/window/SingleInstanceWindow.qml",
+            "/pageWindow":"qrc:/example/qml/window/PageWindow.qml"
         }
         FluApp.initialRoute = "/"
         FluApp.httpInterceptor = interceptor
diff --git a/example/qml/global/ItemsFooter.qml b/example/qml/global/ItemsFooter.qml
index 463b52e2..5ea2f91b 100644
--- a/example/qml/global/ItemsFooter.qml
+++ b/example/qml/global/ItemsFooter.qml
@@ -14,7 +14,8 @@ FluObject{
     FluPaneItem{
         title:lang.about
         icon:FluentIcons.Contact
-        tapFunc:function(){
+        onDropped: { FluApp.navigate("/about") }
+        onTapListener:function(){
             FluApp.navigate("/about")
         }
     }
@@ -22,8 +23,10 @@ FluObject{
     FluPaneItem{
         title:lang.settings
         icon:FluentIcons.Settings
+        url:"qrc:/example/qml/page/T_Settings.qml"
+        onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
         onTap:{
-            navigationView.push("qrc:/example/qml/page/T_Settings.qml")
+            navigationView.push(url)
         }
     }
 
diff --git a/example/qml/global/ItemsOriginal.qml b/example/qml/global/ItemsOriginal.qml
index 5ebe0e96..7c27c4cf 100644
--- a/example/qml/global/ItemsOriginal.qml
+++ b/example/qml/global/ItemsOriginal.qml
@@ -21,11 +21,13 @@ FluObject{
             count: item_home.count
         }
         icon:FluentIcons.Home
+        url:"qrc:/example/qml/page/T_Home.qml"
+        onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
         onTap:{
             if(navigationView.getCurrentUrl()){
                 item_home.count = 0
             }
-            navigationView.push("qrc:/example/qml/page/T_Home.qml")
+            navigationView.push(url)
         }
         editDelegate: FluTextBox{
             text:item_home.title
@@ -69,9 +71,11 @@ FluObject{
             image:"qrc:/example/res/image/control/Button.png"
             recentlyUpdated:true
             desc:"A control that responds to user input and raisesa Click event."
+            url:"qrc:/example/qml/page/T_Buttons.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{
                 item_buttons.count = 0
-                navigationView.push("qrc:/example/qml/page/T_Buttons.qml")
+                navigationView.push(url)
             }
         }
         FluPaneItem{
@@ -82,46 +86,45 @@ FluObject{
                 count: item_text.count
                 color: Qt.rgba(82/255,196/255,26/255,1)
             }
-            onTap:{
-                item_text.count = 0
-                navigationView.push("qrc:/example/qml/page/T_Text.qml")
-            }
+            url:"qrc:/example/qml/page/T_Text.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Image"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Image.qml")
-            }
+            url:"qrc:/example/qml/page/T_Image.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Slider"
             image:"qrc:/example/res/image/control/Slider.png"
             recentlyUpdated:true
             desc:"A control that lets the user select from a rangeof values by moving a Thumb control along atrack."
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Slider.qml")
-            }
+            url:"qrc:/example/qml/page/T_Slider.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"CheckBox"
             image:"qrc:/example/res/image/control/Checkbox.png"
             recentlyUpdated:true
             desc:"A control that a user can select or clear."
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_CheckBox.qml")
-            }
+            url:"qrc:/example/qml/page/T_CheckBox.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"RadioButton"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_RadioButton.qml")
-            }
+            url:"qrc:/example/qml/page/T_RadioButton.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"ToggleSwitch"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_ToggleSwitch.qml")
-            }
+            url:"qrc:/example/qml/page/T_ToggleSwitch.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
     }
 
@@ -130,33 +133,33 @@ FluObject{
         icon:FluentIcons.GridView
         FluPaneItem{
             title:"TextBox"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_TextBox.qml")
-            }
+            url:"qrc:/example/qml/page/T_TextBox.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"TimePicker"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_TimePicker.qml")
-            }
+            url:"qrc:/example/qml/page/T_TimePicker.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"DatePicker"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_DatePicker.qml")
-            }
+            url:"qrc:/example/qml/page/T_DatePicker.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"CalendarPicker"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_CalendarPicker.qml")
-            }
+            url:"qrc:/example/qml/page/T_CalendarPicker.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"ColorPicker"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_ColorPicker.qml")
-            }
+            url:"qrc:/example/qml/page/T_ColorPicker.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
     }
 
@@ -168,57 +171,57 @@ FluObject{
             image:"qrc:/example/res/image/control/InfoBar.png"
             recentlyUpdated:true
             desc:"An inline message to display app-wide statuschange information."
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_InfoBar.qml")
-            }
+            url:"qrc:/example/qml/page/T_InfoBar.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Progress"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Progress.qml")
-            }
+            url:"qrc:/example/qml/page/T_Progress.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"RatingControl"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_RatingControl.qml")
-            }
+            url:"qrc:/example/qml/page/T_RatingControl.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Badge"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Badge.qml")
-            }
+            url:"qrc:/example/qml/page/T_Badge.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Rectangle"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Rectangle.qml")
-            }
+            url:"qrc:/example/qml/page/T_Rectangle.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"StatusView"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_StatusView.qml")
-            }
+            url:"qrc:/example/qml/page/T_StatusView.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Carousel"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Carousel.qml")
-            }
+            url:"qrc:/example/qml/page/T_Carousel.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Expander"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Expander.qml")
-            }
+            url:"qrc:/example/qml/page/T_Expander.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Watermark"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Watermark.qml")
-            }
+            url:"qrc:/example/qml/page/T_Watermark.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
     }
 
@@ -227,9 +230,9 @@ FluObject{
         icon:FluentIcons.ButtonMenu
         FluPaneItem{
             title:"Dialog"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Dialog.qml")
-            }
+            url:"qrc:/example/qml/page/T_Dialog.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             id:item_combobox
@@ -239,6 +242,8 @@ FluObject{
                 count: item_combobox.count
                 color: Qt.rgba(250/255,173/255,20/255,1)
             }
+            url:"qrc:/example/qml/page/T_ComboBox.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{
                 item_combobox.count = 0
                 navigationView.push("qrc:/example/qml/page/T_ComboBox.qml")
@@ -246,15 +251,15 @@ FluObject{
         }
         FluPaneItem{
             title:"Tooltip"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Tooltip.qml")
-            }
+            url:"qrc:/example/qml/page/T_Tooltip.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Menu"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Menu.qml")
-            }
+            url:"qrc:/example/qml/page/T_Menu.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
     }
 
@@ -267,15 +272,15 @@ FluObject{
             recentlyAdded:true
             order:3
             desc:"Presents information from different sources in atabbed view."
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Pivot.qml")
-            }
+            url:"qrc:/example/qml/page/T_Pivot.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"BreadcrumbBar"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_BreadcrumbBar.qml")
-            }
+            url:"qrc:/example/qml/page/T_BreadcrumbBar.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"TabView"
@@ -283,15 +288,15 @@ FluObject{
             recentlyAdded:true
             order:1
             desc:"A control that displays a collection of tabs thatcan be used to display several documents."
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_TabView.qml")
-            }
+            url:"qrc:/example/qml/page/T_TabView.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"TreeView"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_TreeView.qml")
-            }
+            url:"qrc:/example/qml/page/T_TreeView.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"TableView"
@@ -299,21 +304,21 @@ FluObject{
             recentlyAdded:true
             order:4
             desc:"The TableView control provides a flexible way to display a collection of data in rows and columns"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_TableView.qml")
-            }
+            url:"qrc:/example/qml/page/T_TableView.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Pagination"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Pagination.qml")
-            }
+            url:"qrc:/example/qml/page/T_Pagination.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"MultiWindow"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_MultiWindow.qml")
-            }
+            url:"qrc:/example/qml/page/T_MultiWindow.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"FlipView"
@@ -321,9 +326,9 @@ FluObject{
             recentlyAdded:true
             order:2
             desc:"Presents a collection of items that the user canflip through, one item at a time."
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_FlipView.qml")
-            }
+            url:"qrc:/example/qml/page/T_FlipView.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
     }
 
@@ -332,27 +337,27 @@ FluObject{
         icon:FluentIcons.Brightness
         FluPaneItem{
             title:"Acrylic"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Acrylic.qml")
-            }
+            url:"qrc:/example/qml/page/T_Acrylic.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Theme"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Theme.qml")
-            }
+            url:"qrc:/example/qml/page/T_Theme.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Typography"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Typography.qml")
-            }
+            url:"qrc:/example/qml/page/T_Typography.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Awesome"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Awesome.qml")
-            }
+            url:"qrc:/example/qml/page/T_Awesome.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
     }
 
@@ -366,45 +371,45 @@ FluObject{
         icon:FluentIcons.Shop
         FluPaneItem{
             title:"QRCode"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_QRCode.qml")
-            }
+            url:"qrc:/example/qml/page/T_QRCode.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Tour"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Tour.qml")
-            }
+            url:"qrc:/example/qml/page/T_Tour.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Timeline"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Timeline.qml")
-            }
+            url:"qrc:/example/qml/page/T_Timeline.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Screenshot"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Screenshot.qml")
-            }
+            url:"qrc:/example/qml/page/T_Screenshot.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Captcha"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Captcha.qml")
-            }
+            url:"qrc:/example/qml/page/T_Captcha.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Chart"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Chart.qml")
-            }
+            url:"qrc:/example/qml/page/T_Chart.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Http"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Http.qml")
-            }
+            url:"qrc:/example/qml/page/T_Http.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             id:item_other
@@ -414,6 +419,8 @@ FluObject{
                 count: item_other.count
                 color: Qt.rgba(82/255,196/255,26/255,1)
             }
+            url:"qrc:/example/qml/page/T_RemoteLoader.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{
                 item_other.count = 0
                 navigationView.push("qrc:/example/qml/page/T_RemoteLoader.qml")
@@ -421,9 +428,10 @@ FluObject{
         }
         FluPaneItem{
             title:"HotLoader"
-            tapFunc:function(){
+            onTapListener:function(){
                 FluApp.navigate("/hotload")
             }
+            onDropped:{ FluApp.navigate("/hotload") }
         }
     }
 
diff --git a/example/qml/page/T_Acrylic.qml b/example/qml/page/T_Acrylic.qml
index e23f239a..d34c0a86 100644
--- a/example/qml/page/T_Acrylic.qml
+++ b/example/qml/page/T_Acrylic.qml
@@ -4,6 +4,7 @@ import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
diff --git a/example/qml/page/T_Badge.qml b/example/qml/page/T_Badge.qml
index 8ce25806..a7d88e57 100644
--- a/example/qml/page/T_Badge.qml
+++ b/example/qml/page/T_Badge.qml
@@ -4,6 +4,7 @@ import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
diff --git a/example/qml/page/T_BreadcrumbBar.qml b/example/qml/page/T_BreadcrumbBar.qml
index bfe65baf..07faddca 100644
--- a/example/qml/page/T_BreadcrumbBar.qml
+++ b/example/qml/page/T_BreadcrumbBar.qml
@@ -4,6 +4,7 @@ import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
diff --git a/example/qml/page/T_Buttons.qml b/example/qml/page/T_Buttons.qml
index 699c8318..7749f501 100644
--- a/example/qml/page/T_Buttons.qml
+++ b/example/qml/page/T_Buttons.qml
@@ -4,6 +4,7 @@ import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
diff --git a/example/qml/page/T_CalendarPicker.qml b/example/qml/page/T_CalendarPicker.qml
index f894cbe2..fd889f4f 100644
--- a/example/qml/page/T_CalendarPicker.qml
+++ b/example/qml/page/T_CalendarPicker.qml
@@ -4,6 +4,7 @@ import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
diff --git a/example/qml/page/T_Captcha.qml b/example/qml/page/T_Captcha.qml
index 68466fce..45797105 100644
--- a/example/qml/page/T_Captcha.qml
+++ b/example/qml/page/T_Captcha.qml
@@ -4,6 +4,7 @@ import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
diff --git a/example/qml/page/T_Carousel.qml b/example/qml/page/T_Carousel.qml
index de27ff74..30373b32 100644
--- a/example/qml/page/T_Carousel.qml
+++ b/example/qml/page/T_Carousel.qml
@@ -4,6 +4,7 @@ import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
diff --git a/example/qml/page/T_Chart.qml b/example/qml/page/T_Chart.qml
index 53906ba9..6f9a0d06 100644
--- a/example/qml/page/T_Chart.qml
+++ b/example/qml/page/T_Chart.qml
@@ -4,6 +4,7 @@ import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
diff --git a/example/qml/page/T_CheckBox.qml b/example/qml/page/T_CheckBox.qml
index 28605536..87677c73 100644
--- a/example/qml/page/T_CheckBox.qml
+++ b/example/qml/page/T_CheckBox.qml
@@ -4,6 +4,7 @@ import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
diff --git a/example/qml/page/T_ColorPicker.qml b/example/qml/page/T_ColorPicker.qml
index 93375c3a..4bcedf7e 100644
--- a/example/qml/page/T_ColorPicker.qml
+++ b/example/qml/page/T_ColorPicker.qml
@@ -4,6 +4,7 @@ import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
diff --git a/example/qml/page/T_ComboBox.qml b/example/qml/page/T_ComboBox.qml
index d5463a7c..cec95740 100644
--- a/example/qml/page/T_ComboBox.qml
+++ b/example/qml/page/T_ComboBox.qml
@@ -4,6 +4,7 @@ import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
diff --git a/example/qml/page/T_DatePicker.qml b/example/qml/page/T_DatePicker.qml
index ffbb47c0..9c8e844a 100644
--- a/example/qml/page/T_DatePicker.qml
+++ b/example/qml/page/T_DatePicker.qml
@@ -4,6 +4,7 @@ import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
diff --git a/example/qml/page/T_Dialog.qml b/example/qml/page/T_Dialog.qml
index d4a14699..c59911bf 100644
--- a/example/qml/page/T_Dialog.qml
+++ b/example/qml/page/T_Dialog.qml
@@ -4,6 +4,7 @@ import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
diff --git a/example/qml/page/T_Expander.qml b/example/qml/page/T_Expander.qml
index b9af09a3..5b5f45a4 100644
--- a/example/qml/page/T_Expander.qml
+++ b/example/qml/page/T_Expander.qml
@@ -4,6 +4,7 @@ import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
diff --git a/example/qml/page/T_FlipView.qml b/example/qml/page/T_FlipView.qml
index 843b9ab9..3909f28a 100644
--- a/example/qml/page/T_FlipView.qml
+++ b/example/qml/page/T_FlipView.qml
@@ -4,6 +4,7 @@ import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
diff --git a/example/qml/page/T_Http.qml b/example/qml/page/T_Http.qml
index b5f2123c..0a1c5e66 100644
--- a/example/qml/page/T_Http.qml
+++ b/example/qml/page/T_Http.qml
@@ -6,6 +6,7 @@ import QtQuick.Controls 2.15
 import QtQuick.Dialogs 1.3
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluContentPage{
 
diff --git a/example/qml/page/T_Image.qml b/example/qml/page/T_Image.qml
index fb63d065..9175f6f4 100644
--- a/example/qml/page/T_Image.qml
+++ b/example/qml/page/T_Image.qml
@@ -4,6 +4,7 @@ import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
diff --git a/example/qml/page/T_InfoBar.qml b/example/qml/page/T_InfoBar.qml
index ff5894a1..55dd065a 100644
--- a/example/qml/page/T_InfoBar.qml
+++ b/example/qml/page/T_InfoBar.qml
@@ -4,6 +4,7 @@ import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
diff --git a/example/qml/page/T_Menu.qml b/example/qml/page/T_Menu.qml
index 5b2f1808..1e219931 100644
--- a/example/qml/page/T_Menu.qml
+++ b/example/qml/page/T_Menu.qml
@@ -4,6 +4,7 @@ import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
diff --git a/example/qml/page/T_MultiWindow.qml b/example/qml/page/T_MultiWindow.qml
index 88ff4137..fdf6c189 100644
--- a/example/qml/page/T_MultiWindow.qml
+++ b/example/qml/page/T_MultiWindow.qml
@@ -4,6 +4,7 @@ import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
diff --git a/example/qml/page/T_Pagination.qml b/example/qml/page/T_Pagination.qml
index 838a4c9f..08200e41 100644
--- a/example/qml/page/T_Pagination.qml
+++ b/example/qml/page/T_Pagination.qml
@@ -3,6 +3,7 @@ import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import "qrc:///example/qml/component"
+import "../component"
 import FluentUI 1.0
 
 FluScrollablePage{
diff --git a/example/qml/page/T_Pivot.qml b/example/qml/page/T_Pivot.qml
index bd75554c..ef7ea1da 100644
--- a/example/qml/page/T_Pivot.qml
+++ b/example/qml/page/T_Pivot.qml
@@ -4,6 +4,7 @@ import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
diff --git a/example/qml/page/T_Progress.qml b/example/qml/page/T_Progress.qml
index d5ded7de..6b8e71ca 100644
--- a/example/qml/page/T_Progress.qml
+++ b/example/qml/page/T_Progress.qml
@@ -4,6 +4,7 @@ import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
diff --git a/example/qml/page/T_QRCode.qml b/example/qml/page/T_QRCode.qml
index 956c4d20..ed36f729 100644
--- a/example/qml/page/T_QRCode.qml
+++ b/example/qml/page/T_QRCode.qml
@@ -5,6 +5,7 @@ import QtQuick.Window 2.15
 import FluentUI 1.0
 import QtGraphicalEffects 1.15
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
diff --git a/example/qml/page/T_RadioButton.qml b/example/qml/page/T_RadioButton.qml
index 85307ab5..461443dc 100644
--- a/example/qml/page/T_RadioButton.qml
+++ b/example/qml/page/T_RadioButton.qml
@@ -4,6 +4,7 @@ import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
diff --git a/example/qml/page/T_RatingControl.qml b/example/qml/page/T_RatingControl.qml
index 05bd99a5..0cd31a91 100644
--- a/example/qml/page/T_RatingControl.qml
+++ b/example/qml/page/T_RatingControl.qml
@@ -4,6 +4,7 @@ import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage {
 
diff --git a/example/qml/page/T_Rectangle.qml b/example/qml/page/T_Rectangle.qml
index 346aeab4..905d9553 100644
--- a/example/qml/page/T_Rectangle.qml
+++ b/example/qml/page/T_Rectangle.qml
@@ -4,6 +4,7 @@ import QtQuick.Controls 2.15
 import QtQuick.Window 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
diff --git a/example/qml/page/T_RemoteLoader.qml b/example/qml/page/T_RemoteLoader.qml
index c8e11c17..a6723a9a 100644
--- a/example/qml/page/T_RemoteLoader.qml
+++ b/example/qml/page/T_RemoteLoader.qml
@@ -4,6 +4,7 @@ import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluPage{
     launchMode: FluPageType.SingleTop
diff --git a/example/qml/page/T_Screenshot.qml b/example/qml/page/T_Screenshot.qml
index e146041b..df25546e 100644
--- a/example/qml/page/T_Screenshot.qml
+++ b/example/qml/page/T_Screenshot.qml
@@ -4,6 +4,7 @@ import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
diff --git a/example/qml/page/T_Settings.qml b/example/qml/page/T_Settings.qml
index 57dadfe3..bb4f99a2 100644
--- a/example/qml/page/T_Settings.qml
+++ b/example/qml/page/T_Settings.qml
@@ -5,6 +5,7 @@ import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/global"
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
diff --git a/example/qml/page/T_Slider.qml b/example/qml/page/T_Slider.qml
index 138e265a..7d0c64b7 100644
--- a/example/qml/page/T_Slider.qml
+++ b/example/qml/page/T_Slider.qml
@@ -3,6 +3,7 @@ import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import "qrc:///example/qml/component"
+import "../component"
 import FluentUI 1.0
 
 FluScrollablePage{
diff --git a/example/qml/page/T_StatusView.qml b/example/qml/page/T_StatusView.qml
index d84abc27..c92f63a1 100644
--- a/example/qml/page/T_StatusView.qml
+++ b/example/qml/page/T_StatusView.qml
@@ -4,6 +4,7 @@ import QtQuick.Controls 2.15
 import QtQuick.Window 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
diff --git a/example/qml/page/T_TabView.qml b/example/qml/page/T_TabView.qml
index dbdb9bcd..16ebd38a 100644
--- a/example/qml/page/T_TabView.qml
+++ b/example/qml/page/T_TabView.qml
@@ -4,6 +4,7 @@ import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
diff --git a/example/qml/page/T_TableView.qml b/example/qml/page/T_TableView.qml
index 26641d95..da48606d 100644
--- a/example/qml/page/T_TableView.qml
+++ b/example/qml/page/T_TableView.qml
@@ -4,6 +4,7 @@ import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluContentPage{
 
diff --git a/example/qml/page/T_Text.qml b/example/qml/page/T_Text.qml
index 43f43f13..77f05243 100644
--- a/example/qml/page/T_Text.qml
+++ b/example/qml/page/T_Text.qml
@@ -4,6 +4,7 @@ import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
diff --git a/example/qml/page/T_TextBox.qml b/example/qml/page/T_TextBox.qml
index 5b717171..4e8bdc09 100644
--- a/example/qml/page/T_TextBox.qml
+++ b/example/qml/page/T_TextBox.qml
@@ -4,6 +4,7 @@ import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
diff --git a/example/qml/page/T_Theme.qml b/example/qml/page/T_Theme.qml
index 4cd901dc..dcb3298a 100644
--- a/example/qml/page/T_Theme.qml
+++ b/example/qml/page/T_Theme.qml
@@ -4,6 +4,7 @@ import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
diff --git a/example/qml/page/T_TimePicker.qml b/example/qml/page/T_TimePicker.qml
index c1655ac7..a5511d5c 100644
--- a/example/qml/page/T_TimePicker.qml
+++ b/example/qml/page/T_TimePicker.qml
@@ -4,6 +4,7 @@ import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
diff --git a/example/qml/page/T_Timeline.qml b/example/qml/page/T_Timeline.qml
index 72a33665..43767b1a 100644
--- a/example/qml/page/T_Timeline.qml
+++ b/example/qml/page/T_Timeline.qml
@@ -4,6 +4,7 @@ import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
diff --git a/example/qml/page/T_ToggleSwitch.qml b/example/qml/page/T_ToggleSwitch.qml
index 79122cc3..f44b2fac 100644
--- a/example/qml/page/T_ToggleSwitch.qml
+++ b/example/qml/page/T_ToggleSwitch.qml
@@ -4,6 +4,7 @@ import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
diff --git a/example/qml/page/T_Tooltip.qml b/example/qml/page/T_Tooltip.qml
index 16e335a8..1ca9b777 100644
--- a/example/qml/page/T_Tooltip.qml
+++ b/example/qml/page/T_Tooltip.qml
@@ -4,6 +4,7 @@ import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
diff --git a/example/qml/page/T_Tour.qml b/example/qml/page/T_Tour.qml
index 74ea324c..33a7011f 100644
--- a/example/qml/page/T_Tour.qml
+++ b/example/qml/page/T_Tour.qml
@@ -4,6 +4,7 @@ import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
diff --git a/example/qml/page/T_TreeView.qml b/example/qml/page/T_TreeView.qml
index c2604fc4..5f507fef 100644
--- a/example/qml/page/T_TreeView.qml
+++ b/example/qml/page/T_TreeView.qml
@@ -4,6 +4,7 @@ import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage {
 
diff --git a/example/qml/page/T_Watermark.qml b/example/qml/page/T_Watermark.qml
index 7c352683..78d4cd8a 100644
--- a/example/qml/page/T_Watermark.qml
+++ b/example/qml/page/T_Watermark.qml
@@ -4,6 +4,7 @@ import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluContentPage{
 
diff --git a/example/qml/window/AboutWindow.qml b/example/qml/window/AboutWindow.qml
index 33fb6cdb..aff6de8c 100644
--- a/example/qml/window/AboutWindow.qml
+++ b/example/qml/window/AboutWindow.qml
@@ -3,6 +3,7 @@ import QtQuick.Controls 2.15
 import QtQuick.Layouts 1.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 CustomWindow {
 
diff --git a/example/qml/window/HotloadWindow.qml b/example/qml/window/HotloadWindow.qml
index 07e918a0..8c89810c 100644
--- a/example/qml/window/HotloadWindow.qml
+++ b/example/qml/window/HotloadWindow.qml
@@ -4,6 +4,7 @@ import QtQuick.Layouts 1.15
 import FluentUI 1.0
 import example 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 CustomWindow {
 
diff --git a/example/qml/window/LoginWindow.qml b/example/qml/window/LoginWindow.qml
index 8ae713ec..81f4b39a 100644
--- a/example/qml/window/LoginWindow.qml
+++ b/example/qml/window/LoginWindow.qml
@@ -3,6 +3,7 @@ import QtQuick.Layouts 1.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 CustomWindow {
 
diff --git a/example/qml/window/MainWindow.qml b/example/qml/window/MainWindow.qml
index c34e31f7..229cfad2 100644
--- a/example/qml/window/MainWindow.qml
+++ b/example/qml/window/MainWindow.qml
@@ -6,6 +6,7 @@ import Qt.labs.platform 1.1
 import FluentUI 1.0
 import example 1.0
 import "qrc:///example/qml/component"
+import "../component"
 import "qrc:///example/qml/global"
 
 CustomWindow {
diff --git a/example/qml/window/PageWindow.qml b/example/qml/window/PageWindow.qml
new file mode 100644
index 00000000..174ebeb6
--- /dev/null
+++ b/example/qml/window/PageWindow.qml
@@ -0,0 +1,26 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import FluentUI 1.0
+import example 1.0
+import "qrc:///example/qml/component"
+import "../component"
+
+CustomWindow {
+
+    id:window
+    width: 800
+    height: 600
+    minimumWidth: 520
+    minimumHeight: 200
+    launchMode: FluWindowType.SingleInstance
+    onInitArgument:
+        (arg)=>{
+            window.title = arg.title
+            loader.setSource( arg.url,{animDisabled:true})
+        }
+    Loader{
+        id: loader
+        anchors.fill: parent
+    }
+}
diff --git a/example/qml/window/SingleInstanceWindow.qml b/example/qml/window/SingleInstanceWindow.qml
index bfd95d88..5e75b6b4 100644
--- a/example/qml/window/SingleInstanceWindow.qml
+++ b/example/qml/window/SingleInstanceWindow.qml
@@ -3,6 +3,7 @@ import QtQuick.Controls 2.15
 import QtQuick.Layouts 1.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 CustomWindow {
 
diff --git a/example/qml/window/SingleTaskWindow.qml b/example/qml/window/SingleTaskWindow.qml
index b3354da4..dabb1084 100644
--- a/example/qml/window/SingleTaskWindow.qml
+++ b/example/qml/window/SingleTaskWindow.qml
@@ -3,6 +3,7 @@ import QtQuick.Controls 2.15
 import QtQuick.Layouts 1.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 CustomWindow {
 
diff --git a/example/qml/window/StandardWindow.qml b/example/qml/window/StandardWindow.qml
index 848dae4d..44780e63 100644
--- a/example/qml/window/StandardWindow.qml
+++ b/example/qml/window/StandardWindow.qml
@@ -3,6 +3,7 @@ import QtQuick.Controls 2.15
 import QtQuick.Layouts 1.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 CustomWindow {
 
diff --git a/example/resource.qrc b/example/resource.qrc
index 252fbb0e..95d3d5cd 100644
--- a/example/resource.qrc
+++ b/example/resource.qrc
@@ -184,5 +184,6 @@
         <file>qml/window/StandardWindow.qml</file>
         <file>res/image/bg_scenic.png</file>
         <file>res/image/image_1.jpg</file>
+        <file>qml/window/PageWindow.qml</file>
     </qresource>
 </RCC>
diff --git a/example/src/main.cpp b/example/src/main.cpp
index d5df129e..9b20b8fc 100644
--- a/example/src/main.cpp
+++ b/example/src/main.cpp
@@ -36,7 +36,7 @@ int main(int argc, char *argv[])
     FramelessConfig::instance()->set(Global::Option::EnableBlurBehindWindow);
 #ifdef Q_OS_WIN // 此设置仅在Windows下生效
     FramelessConfig::instance()->set(Global::Option::ForceHideWindowFrameBorder);
-    FramelessConfig::instance()->set(Global::Option::EnableBlurBehindWindow,false);
+    FramelessConfig::instance()->set(Global::Option::EnableBlurBehindWindow,true);
 #endif
 #ifdef Q_OS_MACOS
     FramelessConfig::instance()->set(Global::Option::ForceNonNativeBackgroundBlur,false);
diff --git a/src/Qt5/imports/FluentUI/Controls/FluNavigationView.qml b/src/Qt5/imports/FluentUI/Controls/FluNavigationView.qml
index a2ef685a..72e5ddc4 100644
--- a/src/Qt5/imports/FluentUI/Controls/FluNavigationView.qml
+++ b/src/Qt5/imports/FluentUI/Controls/FluNavigationView.qml
@@ -170,17 +170,17 @@ Item {
                 MouseArea{
                     anchors.fill: parent
                     acceptedButtons: Qt.RightButton
-                    onClicked: function(mouse){
-                        if (mouse.button === Qt.RightButton) {
-                            if(model.menuDelegate){
-                                loader_item_menu.sourceComponent = model.menuDelegate
-                                loader_item_menu.item.popup()
+                    onClicked:
+                        (mouse) =>{
+                            if (mouse.button === Qt.RightButton) {
+                                if(model.menuDelegate){
+                                    loader_item_menu.sourceComponent = model.menuDelegate
+                                    loader_item_menu.item.popup()
+                                }
                             }
                         }
-                    }
                     z:-100
                 }
-
                 onClicked: {
                     if(d.isCompactAndNotPanel){
                         control_popup.showPopup(Qt.point(50,mapToItem(control,0,0).y),model.children)
@@ -356,7 +356,7 @@ Item {
                             ignoreUnknownSignals:true
                             function onActiveFocusChanged(focus){
                                 if(focus === false){
-                                   model.showEdit = false
+                                    model.showEdit = false
                                 }
                             }
                             function onCommit(text){
@@ -393,54 +393,81 @@ Item {
             }
             width: layout_list.width
             FluControl{
+                property var modelData: model
                 id:item_control
-                anchors{
-                    top: parent.top
-                    bottom: parent.bottom
-                    left: parent.left
-                    right: parent.right
-                    topMargin: 2
-                    bottomMargin: 2
-                    leftMargin: 6
-                    rightMargin: 6
-                }
+                width: layout_list.width - 12
+                height: 34
+                x:6
+                y:2
+                Drag.active: item_mouse.drag.active
+                Drag.hotSpot.x: item_control.width / 2
+                Drag.hotSpot.y: item_control.height / 2
+                Drag.dragType: Drag.Automatic
+                states: [
+                    State {
+                        when: item_mouse.drag.active
+                        ParentChange {
+                            target: item_control
+                            parent: control
+                        }
+                        AnchorChanges {
+                            target: item_control
+                            anchors {
+                                horizontalCenter: undefined
+                                verticalCenter: undefined
+                            }
+                        }
+                    }
+                ]
                 MouseArea{
+                    id:item_mouse
                     anchors.fill: parent
-                    acceptedButtons:  Qt.RightButton
-                    onClicked: function(mouse){
-                        if (mouse.button === Qt.RightButton) {
-                            if(model.menuDelegate){
-                                loader_item_menu.sourceComponent = model.menuDelegate
-                                loader_item_menu.item.popup();
-                            }
-                        }
+                    acceptedButtons: Qt.RightButton | Qt.LeftButton
+                    drag.target: item_control
+                    onPositionChanged: {
+                        parent.grabToImage(function(result) {
+                            parent.Drag.imageSource = result.url;
+                        })
                     }
-                    z:-100
-                }
-                onClicked: {
-                    if(type === 0){
-                        if(model.tapFunc){
-                            model.tapFunc()
-                        }else{
-                            nav_list.currentIndex = _idx
-                            layout_footer.currentIndex = -1
-                            model.tap()
-                            if(d.isMinimal || d.isCompact){
-                                d.enableNavigationPanel = false
+                    drag.onActiveChanged:
+                        if (active) {
+                            parent.grabToImage(function(result) {
+                                parent.Drag.imageSource = result.url;
+                            })
+                        }
+                    onClicked:
+                        (mouse)=>{
+                            if (mouse.button === Qt.RightButton) {
+                                if(model.menuDelegate){
+                                    loader_item_menu.sourceComponent = model.menuDelegate
+                                    loader_item_menu.item.popup();
+                                }
+                            }else{
+                                if(type === 0){
+                                    if(model.onTapListener){
+                                        model.onTapListener()
+                                    }else{
+                                        nav_list.currentIndex = _idx
+                                        layout_footer.currentIndex = -1
+                                        model.tap()
+                                        if(d.isMinimal || d.isCompact){
+                                            d.enableNavigationPanel = false
+                                        }
+                                    }
+                                }else{
+                                    if(model.onTapListener){
+                                        model.onTapListener()
+                                    }else{
+                                        nav_list.currentIndex = nav_list.count-layout_footer.count+_idx
+                                        layout_footer.currentIndex = _idx
+                                        model.tap()
+                                        if(d.isMinimal || d.isCompact){
+                                            d.enableNavigationPanel = false
+                                        }
+                                    }
+                                }
                             }
                         }
-                    }else{
-                        if(model.tapFunc){
-                            model.tapFunc()
-                        }else{
-                            nav_list.currentIndex = nav_list.count-layout_footer.count+_idx
-                            layout_footer.currentIndex = _idx
-                            model.tap()
-                            if(d.isMinimal || d.isCompact){
-                                d.enableNavigationPanel = false
-                            }
-                        }
-                    }
                 }
                 Rectangle{
                     radius: 4
@@ -518,7 +545,7 @@ Item {
                         }
                         elide: Text.ElideRight
                         color:{
-                            if(item_control.pressed){
+                            if(item_mouse.pressed){
                                 return FluTheme.dark ? FluColors.Grey80 : FluColors.Grey120
                             }
                             return FluTheme.dark ? FluColors.White : FluColors.Grey220
@@ -555,7 +582,7 @@ Item {
                             ignoreUnknownSignals:true
                             function onActiveFocusChanged(focus){
                                 if(focus === false){
-                                   model.showEdit = false
+                                    model.showEdit = false
                                 }
                             }
                             function onCommit(text){
@@ -745,7 +772,13 @@ Item {
             }
         }
     }
-
+    DropArea{
+        anchors.fill: loader_content
+        onDropped:
+            (drag)=>{
+                drag.source.modelData.dropped(drag)
+            }
+    }
     Loader{
         id:loader_content
         anchors{
@@ -880,6 +913,12 @@ Item {
             ListView{
                 id:nav_list
                 clip: true
+                displaced: Transition {
+                    NumberAnimation {
+                        properties: "x,y"
+                        easing.type: Easing.OutQuad
+                    }
+                }
                 anchors.fill: parent
                 model:d.handleItems()
                 boundsBehavior: ListView.StopAtBounds
@@ -899,7 +938,6 @@ Item {
                     }
                 }
                 currentIndex: -1
-
                 delegate: Loader{
                     property var model: modelData
                     property var _idx: index
@@ -1051,8 +1089,8 @@ Item {
                         }
                     }
                     onClicked: {
-                        if(modelData.tapFunc){
-                            modelData.tapFunc()
+                        if(modelData.onTapListener){
+                            modelData.onTapListener()
                         }else{
                             modelData.tap()
                             nav_list.currentIndex = _idx
diff --git a/src/Qt5/imports/FluentUI/Controls/FluPaneItem.qml b/src/Qt5/imports/FluentUI/Controls/FluPaneItem.qml
index 4e3e79c1..0002bb39 100644
--- a/src/Qt5/imports/FluentUI/Controls/FluPaneItem.qml
+++ b/src/Qt5/imports/FluentUI/Controls/FluPaneItem.qml
@@ -9,6 +9,7 @@ QtObject {
     property string title
     property int order : 0
     property int icon
+    property var url
     property Component cusIcon
     property Component infoBadge
     property bool recentlyAdded: false
@@ -18,8 +19,9 @@ QtObject {
     property var parent
     property int count: 0
     signal tap
-    property var tapFunc
+    property var onTapListener
     property Component menuDelegate
     property Component editDelegate
     property bool showEdit
+    signal dropped(var drag)
 }
diff --git a/src/Qt6/imports/FluentUI/Controls/FluNavigationView.qml b/src/Qt6/imports/FluentUI/Controls/FluNavigationView.qml
index 819fd4e3..204f68dd 100644
--- a/src/Qt6/imports/FluentUI/Controls/FluNavigationView.qml
+++ b/src/Qt6/imports/FluentUI/Controls/FluNavigationView.qml
@@ -171,17 +171,17 @@ Item {
                 MouseArea{
                     anchors.fill: parent
                     acceptedButtons: Qt.RightButton
-                    onClicked: function(mouse){
-                        if (mouse.button === Qt.RightButton) {
-                            if(model.menuDelegate){
-                                loader_item_menu.sourceComponent = model.menuDelegate
-                                loader_item_menu.item.popup()
+                    onClicked:
+                        (mouse) =>{
+                            if (mouse.button === Qt.RightButton) {
+                                if(model.menuDelegate){
+                                    loader_item_menu.sourceComponent = model.menuDelegate
+                                    loader_item_menu.item.popup()
+                                }
                             }
                         }
-                    }
                     z:-100
                 }
-
                 onClicked: {
                     if(d.isCompactAndNotPanel){
                         control_popup.showPopup(Qt.point(50,mapToItem(control,0,0).y),model.children)
@@ -357,7 +357,7 @@ Item {
                             ignoreUnknownSignals:true
                             function onActiveFocusChanged(focus){
                                 if(focus === false){
-                                   model.showEdit = false
+                                    model.showEdit = false
                                 }
                             }
                             function onCommit(text){
@@ -394,54 +394,81 @@ Item {
             }
             width: layout_list.width
             FluControl{
+                property var modelData: model
                 id:item_control
-                anchors{
-                    top: parent.top
-                    bottom: parent.bottom
-                    left: parent.left
-                    right: parent.right
-                    topMargin: 2
-                    bottomMargin: 2
-                    leftMargin: 6
-                    rightMargin: 6
-                }
+                width: layout_list.width - 12
+                height: 34
+                x:6
+                y:2
+                Drag.active: item_mouse.drag.active
+                Drag.hotSpot.x: item_control.width / 2
+                Drag.hotSpot.y: item_control.height / 2
+                Drag.dragType: Drag.Automatic
+                states: [
+                    State {
+                        when: item_mouse.drag.active
+                        ParentChange {
+                            target: item_control
+                            parent: control
+                        }
+                        AnchorChanges {
+                            target: item_control
+                            anchors {
+                                horizontalCenter: undefined
+                                verticalCenter: undefined
+                            }
+                        }
+                    }
+                ]
                 MouseArea{
+                    id:item_mouse
                     anchors.fill: parent
-                    acceptedButtons:  Qt.RightButton
-                    onClicked: function(mouse){
-                        if (mouse.button === Qt.RightButton) {
-                            if(model.menuDelegate){
-                                loader_item_menu.sourceComponent = model.menuDelegate
-                                loader_item_menu.item.popup();
-                            }
-                        }
+                    acceptedButtons: Qt.RightButton | Qt.LeftButton
+                    drag.target: item_control
+                    onPositionChanged: {
+                        parent.grabToImage(function(result) {
+                            parent.Drag.imageSource = result.url;
+                        })
                     }
-                    z:-100
-                }
-                onClicked: {
-                    if(type === 0){
-                        if(model.tapFunc){
-                            model.tapFunc()
-                        }else{
-                            nav_list.currentIndex = _idx
-                            layout_footer.currentIndex = -1
-                            model.tap()
-                            if(d.isMinimal || d.isCompact){
-                                d.enableNavigationPanel = false
+                    drag.onActiveChanged:
+                        if (active) {
+                            parent.grabToImage(function(result) {
+                                parent.Drag.imageSource = result.url;
+                            })
+                        }
+                    onClicked:
+                        (mouse)=>{
+                            if (mouse.button === Qt.RightButton) {
+                                if(model.menuDelegate){
+                                    loader_item_menu.sourceComponent = model.menuDelegate
+                                    loader_item_menu.item.popup();
+                                }
+                            }else{
+                                if(type === 0){
+                                    if(model.onTapListener){
+                                        model.onTapListener()
+                                    }else{
+                                        nav_list.currentIndex = _idx
+                                        layout_footer.currentIndex = -1
+                                        model.tap()
+                                        if(d.isMinimal || d.isCompact){
+                                            d.enableNavigationPanel = false
+                                        }
+                                    }
+                                }else{
+                                    if(model.onTapListener){
+                                        model.onTapListener()
+                                    }else{
+                                        nav_list.currentIndex = nav_list.count-layout_footer.count+_idx
+                                        layout_footer.currentIndex = _idx
+                                        model.tap()
+                                        if(d.isMinimal || d.isCompact){
+                                            d.enableNavigationPanel = false
+                                        }
+                                    }
+                                }
                             }
                         }
-                    }else{
-                        if(model.tapFunc){
-                            model.tapFunc()
-                        }else{
-                            nav_list.currentIndex = nav_list.count-layout_footer.count+_idx
-                            layout_footer.currentIndex = _idx
-                            model.tap()
-                            if(d.isMinimal || d.isCompact){
-                                d.enableNavigationPanel = false
-                            }
-                        }
-                    }
                 }
                 Rectangle{
                     radius: 4
@@ -519,7 +546,7 @@ Item {
                         }
                         elide: Text.ElideRight
                         color:{
-                            if(item_control.pressed){
+                            if(item_mouse.pressed){
                                 return FluTheme.dark ? FluColors.Grey80 : FluColors.Grey120
                             }
                             return FluTheme.dark ? FluColors.White : FluColors.Grey220
@@ -556,7 +583,7 @@ Item {
                             ignoreUnknownSignals:true
                             function onActiveFocusChanged(focus){
                                 if(focus === false){
-                                   model.showEdit = false
+                                    model.showEdit = false
                                 }
                             }
                             function onCommit(text){
@@ -736,7 +763,7 @@ Item {
                 id:nav_stack2
                 anchors.fill: nav_stack
                 clip: true
-                visible: nav_stack.currentItem?.launchMode === FluPageType.SingleInstance
+                visible: FluPageType.SingleInstance === nav_stack.currentItem.launchMode
             }
             function navStack(){
                 return nav_stack
@@ -746,7 +773,13 @@ Item {
             }
         }
     }
-
+    DropArea{
+        anchors.fill: loader_content
+        onDropped:
+            (drag)=>{
+                drag.source.modelData.dropped(drag)
+            }
+    }
     Loader{
         id:loader_content
         anchors{
@@ -881,6 +914,12 @@ Item {
             ListView{
                 id:nav_list
                 clip: true
+                displaced: Transition {
+                    NumberAnimation {
+                        properties: "x,y"
+                        easing.type: Easing.OutQuad
+                    }
+                }
                 anchors.fill: parent
                 model:d.handleItems()
                 boundsBehavior: ListView.StopAtBounds
@@ -900,7 +939,6 @@ Item {
                     }
                 }
                 currentIndex: -1
-
                 delegate: Loader{
                     property var model: modelData
                     property var _idx: index
@@ -1052,8 +1090,8 @@ Item {
                         }
                     }
                     onClicked: {
-                        if(modelData.tapFunc){
-                            modelData.tapFunc()
+                        if(modelData.onTapListener){
+                            modelData.onTapListener()
                         }else{
                             modelData.tap()
                             nav_list.currentIndex = _idx
diff --git a/src/Qt6/imports/FluentUI/Controls/FluPaneItem.qml b/src/Qt6/imports/FluentUI/Controls/FluPaneItem.qml
index 4fcf3916..0bc756e7 100644
--- a/src/Qt6/imports/FluentUI/Controls/FluPaneItem.qml
+++ b/src/Qt6/imports/FluentUI/Controls/FluPaneItem.qml
@@ -9,6 +9,7 @@ QtObject {
     property string title
     property int order : 0
     property int icon
+    property var url
     property Component cusIcon
     property Component infoBadge
     property bool recentlyAdded: false
@@ -18,8 +19,9 @@ QtObject {
     property var parent
     property int count: 0
     signal tap
-    property var tapFunc
+    property var onTapListener
     property Component menuDelegate
     property Component editDelegate
     property bool showEdit
+    signal dropped(var drag)
 }