diff --git a/src/packages/sidenavbar/doc.en-US.md b/src/packages/sidenavbar/doc.en-US.md
index 64af02c249..be9425738c 100644
--- a/src/packages/sidenavbar/doc.en-US.md
+++ b/src/packages/sidenavbar/doc.en-US.md
@@ -1,5 +1,7 @@
 # SideNavBar组件
 
+> **⚠️ Note:** This component is deprecated and will be removed in the future. Please use [SideBar](#/en-US/component/sidebar) instead.
+
 For content selection and switching
 
 ## Import
diff --git a/src/packages/sidenavbar/doc.md b/src/packages/sidenavbar/doc.md
index 18cdc3d342..9885cfed6a 100644
--- a/src/packages/sidenavbar/doc.md
+++ b/src/packages/sidenavbar/doc.md
@@ -1,5 +1,7 @@
 # SideNavBar组件
 
+> **⚠️ 注意：** 该组件即将被废弃。请使用 [SideBar](#/zh-CN/component/sidebar) 代替。
+
 用于内容选择和切换
 
 ## 引入
diff --git a/src/packages/sidenavbar/doc.taro.md b/src/packages/sidenavbar/doc.taro.md
index 1db5ec19e3..f8ec0847b6 100644
--- a/src/packages/sidenavbar/doc.taro.md
+++ b/src/packages/sidenavbar/doc.taro.md
@@ -1,6 +1,7 @@
 # SideNavBar组件
 
-用于内容选择和切换
+> **⚠️ 注意：** 该组件即将被废弃。请使用 [SideBar](#/zh-CN/component/sidebar) 代替。
+> 用于内容选择和切换
 
 ## 引入
 
diff --git a/src/packages/sidenavbar/doc.zh-TW.md b/src/packages/sidenavbar/doc.zh-TW.md
index d100e8ba5b..6cdbfbe98e 100644
--- a/src/packages/sidenavbar/doc.zh-TW.md
+++ b/src/packages/sidenavbar/doc.zh-TW.md
@@ -1,5 +1,7 @@
 # SideNavBar組件
 
+> **⚠️ 注意：** 該組件即將被廢棄。請使用 [SideBar](#/zh-CN/component/sidebar) 代替。
+
 用於內容選擇和切換
 
 ## 引入
diff --git a/src/packages/sidenavbar/sidenavbar.taro.tsx b/src/packages/sidenavbar/sidenavbar.taro.tsx
index c2c89928bb..64cc360761 100644
--- a/src/packages/sidenavbar/sidenavbar.taro.tsx
+++ b/src/packages/sidenavbar/sidenavbar.taro.tsx
@@ -1,10 +1,12 @@
-import React, { FunctionComponent, useState, ReactNode } from 'react'
+import React, { FunctionComponent, useState, ReactNode, useEffect } from 'react'
 import classNames from 'classnames'
 import { View } from '@tarojs/components'
 import Popup from '@/packages/popup/index.taro'
 import { OffsetContext } from './context'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
-
+/**
+ * @deprecated Use SideBar instead.
+ */
 export interface SideNavBarProps
   extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>,
     BasicComponent {
@@ -24,6 +26,11 @@ const defaultProps = {
 export const SideNavBar: FunctionComponent<Partial<SideNavBarProps>> = (
   props
 ) => {
+  useEffect(() => {
+    console.warn(
+      'Warning: SideNavBar is deprecated and will be removed in future versions. Please use NewComponent SideBar instead.'
+    )
+  }, [])
   const classPrefix = 'nut-sidenavbar'
   const {
     title,
diff --git a/src/packages/sidenavbar/sidenavbar.tsx b/src/packages/sidenavbar/sidenavbar.tsx
index c1cd4267c2..724a298128 100644
--- a/src/packages/sidenavbar/sidenavbar.tsx
+++ b/src/packages/sidenavbar/sidenavbar.tsx
@@ -1,10 +1,12 @@
-import React, { FunctionComponent, ReactNode } from 'react'
+import React, { FunctionComponent, ReactNode, useEffect } from 'react'
 import classNames from 'classnames'
 import Popup from '@/packages/popup'
 import { handleClick } from './utils'
 import { OffsetContext } from './context'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
-
+/**
+ * @deprecated Use SideBar instead.
+ */
 export interface SideNavBarProps
   extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>,
     BasicComponent {
@@ -25,6 +27,11 @@ const defaultProps = {
 export const SideNavBar: FunctionComponent<Partial<SideNavBarProps>> = (
   props
 ) => {
+  useEffect(() => {
+    console.warn(
+      'Warning: SideNavBar is deprecated and will be removed in future versions. Please use NewComponent SideBar instead.'
+    )
+  }, [])
   const classPrefix = 'nut-sidenavbar'
   const {
     title,