diff --git a/src/packages/navbar/navbar.scss b/src/packages/navbar/navbar.scss
index 1a66821e60..338d13364b 100644
--- a/src/packages/navbar/navbar.scss
+++ b/src/packages/navbar/navbar.scss
@@ -24,11 +24,6 @@
     width: 100%;
   }
 
-  &-safe-area-inset-top {
-    padding-top: constant(safe-area-inset-top);
-    padding-top: env(safe-area-inset-top);
-  }
-
   &-title {
     min-width: 53%;
     margin: 0 auto;
diff --git a/src/packages/navbar/navbar.taro.tsx b/src/packages/navbar/navbar.taro.tsx
index 2c3739de8d..131379ec57 100644
--- a/src/packages/navbar/navbar.taro.tsx
+++ b/src/packages/navbar/navbar.taro.tsx
@@ -1,9 +1,9 @@
 import React, { FunctionComponent, useEffect, useRef, useState } from 'react'
 import classNames from 'classnames'
-
 import { ITouchEvent, View } from '@tarojs/components'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 import { getRectByTaro } from '@/utils/get-rect-by-taro'
+import { SafeArea } from '@/packages/safearea/safearea.taro'
 
 export interface NavBarProps extends BasicComponent {
   left: React.ReactNode
@@ -156,7 +156,6 @@ export const NavBar: FunctionComponent<Partial<NavBarProps>> = (props) => {
 
   const classes = classNames({
     [`${classPrefix}-fixed`]: fixed,
-    [`${classPrefix}-safe-area-inset-top`]: safeAreaInsetTop,
     [`${classPrefix}-title-align-${titleAlign}`]: true,
   })
 
@@ -164,6 +163,7 @@ export const NavBar: FunctionComponent<Partial<NavBarProps>> = (props) => {
 
   return (
     <>
+      {safeAreaInsetTop && <SafeArea position="top" />}
       {fixed && placeholder ? (
         <View className={`${classPrefix}-placeholder`}>{renderWrapper()}</View>
       ) : (
diff --git a/src/packages/navbar/navbar.tsx b/src/packages/navbar/navbar.tsx
index 8ddf755514..dae8145a73 100644
--- a/src/packages/navbar/navbar.tsx
+++ b/src/packages/navbar/navbar.tsx
@@ -3,6 +3,7 @@ import classNames from 'classnames'
 
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 import { getRect } from '@/utils/use-client-rect'
+import { SafeArea } from '@/packages/safearea/safearea'
 
 export interface NavBarProps extends BasicComponent {
   left: React.ReactNode
@@ -153,7 +154,6 @@ export const NavBar: FunctionComponent<Partial<NavBarProps>> = (props) => {
 
   const classes = classNames({
     [`${classPrefix}-fixed`]: fixed,
-    [`${classPrefix}-safe-area-inset-top`]: safeAreaInsetTop,
     [`${classPrefix}-title-align-${titleAlign}`]: true,
   })
 
@@ -161,6 +161,7 @@ export const NavBar: FunctionComponent<Partial<NavBarProps>> = (props) => {
 
   return (
     <>
+      {safeAreaInsetTop && <SafeArea position="top" />}
       {fixed && placeholder ? (
         <div className={`${classPrefix}-placeholder`}>{renderWrapper()}</div>
       ) : (