diff --git a/src/components/unstyled/bottom-navigation.css b/src/components/unstyled/bottom-navigation.css
index 615e7601633..3b7fb29d38f 100644
--- a/src/components/unstyled/bottom-navigation.css
+++ b/src/components/unstyled/bottom-navigation.css
@@ -1,5 +1,6 @@
 .btm-nav {
   @apply flex flex-row items-center justify-around fixed bottom-0 left-0 right-0 w-full;
+  padding-bottom: env(safe-area-inset-bottom);
   &>* {
     @apply flex items-center justify-center flex-col basis-full h-full cursor-pointer relative gap-1;
   }
diff --git a/src/docs/src/routes/components/bottom-navigation.svelte.md b/src/docs/src/routes/components/bottom-navigation.svelte.md
index 0b0ad89c32c..5a8c3389fc8 100644
--- a/src/docs/src/routes/components/bottom-navigation.svelte.md
+++ b/src/docs/src/routes/components/bottom-navigation.svelte.md
@@ -23,6 +23,13 @@ data="{[
 ]}"
 />
 
+<div class="alert alert-info text-sm mb-2">
+  <div>
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-info-content flex-shrink-0 w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
+    The &lt;meta name="viewport" content="viewport-fit=cover"&gt; is required for responsive of the bottom navigation in iOS.
+  </div>
+</div>
+
 <Component title="Bottom Navigation">
 <div class="btm-nav relative">
   <button>