diff --git a/docs/.vitepress/devui-theme/components/NavBar.vue b/docs/.vitepress/devui-theme/components/NavBar.vue
index 2f32a367925633ba76c8d5ddd52c31dc0cd9cd10..c11ad6fd351ab67ebfe9f1018319d65bb27e3ab8 100644
--- a/docs/.vitepress/devui-theme/components/NavBar.vue
+++ b/docs/.vitepress/devui-theme/components/NavBar.vue
@@ -5,11 +5,13 @@ import { Switch as DSwitch } from '@devui/switch'
 import NavBarTitle from './NavBarTitle.vue'
 import NavLinks from './NavLinks.vue'
 import ToggleSideBarButton from './ToggleSideBarButton.vue'
+import NavSearch from './NavSearch.vue'
 
 const theme = new Theme("light");
 
 const darkMode = ref(false);
 const switchText = ref("浅色");
+const searchText = ref('')
 
 watch(
   () => darkMode.value,
@@ -28,6 +30,8 @@ defineEmits(['toggle'])
 
     <NavBarTitle />
 
+    <NavSearch ref="navSearch"/>
+
     <div class="flex-grow" />
 
     <div class="flex">
diff --git a/docs/.vitepress/devui-theme/components/NavBarTitle.vue b/docs/.vitepress/devui-theme/components/NavBarTitle.vue
index 4c54558a1a6253da09f3f4d4d4ff6d3b122ad53a..7b1405f32c723e2e82207dde28b03fb78ee69dbf 100644
--- a/docs/.vitepress/devui-theme/components/NavBarTitle.vue
+++ b/docs/.vitepress/devui-theme/components/NavBarTitle.vue
@@ -26,6 +26,7 @@ const { site, theme, localePath } = useData()
   font-size: 1.3rem;
   font-weight: 600;
   color: $devui-text;
+  margin-right: 40px;
 }
 
 .nav-bar-title:hover {
diff --git a/docs/.vitepress/devui-theme/components/NavSearch.vue b/docs/.vitepress/devui-theme/components/NavSearch.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4b2ca1e5cb5d4d700627959ca2f86554bdfbd923
--- /dev/null
+++ b/docs/.vitepress/devui-theme/components/NavSearch.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { useData } from 'vitepress'
+import { Search as DSearch } from '@devui/Search'
+import { ref, watch } from 'vue'
+
+const { site, theme, localePath } = useData()
+
+const searchText = ref('')
+
+// 目的监听数据Storage变化
+const orignalSetItem = sessionStorage.setItem
+sessionStorage.setItem = function(key,newValue) {
+  let setItemEvent = new Event('setItemEvent')
+  setItemEvent.key = key
+  setItemEvent.newValue = newValue
+  dispatchEvent(setItemEvent)
+  orignalSetItem.apply(this, arguments)
+}
+
+watch(() => {
+  sessionStorage.setItem('search', searchText.value)
+})
+
+</script>
+
+<template>
+  <d-search
+    v-model="searchText"
+    noBorder
+    :delay="500"
+    :placeholder="'请输入你想查找的组件'"
+  >
+  </d-search>
+</template>
+
+<style scoped lang="scss">
+@import '@devui/search/src/search.scss';
+
+</style>
diff --git a/docs/.vitepress/devui-theme/components/SideBarLinks.vue b/docs/.vitepress/devui-theme/components/SideBarLinks.vue
index 768013e3bb73fc63c588d9c5256d4ddfad8f9134..49b7317686e3609f4ee97a048715cc855cfca0f6 100644
--- a/docs/.vitepress/devui-theme/components/SideBarLinks.vue
+++ b/docs/.vitepress/devui-theme/components/SideBarLinks.vue
@@ -1,8 +1,17 @@
 <script setup lang="ts">
+import { ref, computed } from 'vue'
 import { useSideBar } from '../composables/sideBar'
 import { SideBarLink } from './SideBarLink'
 
+const search = ref('')
+addEventListener('setItemEvent', (e) => {
+  search.value = e.newValue
+  console.log(search.value)
+})
+
 const items = useSideBar()
+// const items = useSideBar(search.value)
+
 </script>
 
 <template>