1 estrella en GitHub = 1 componente nuevo.

Dar una estrella
Navegación mobilenavigationbottom bar

Floating Bottom Nav

Barra de navegación fija en la parte inferior para aplicaciones móviles táctiles.

🏠 🔍 🔔 👤

Uso

Copia y pega este código directamente en tu página de Astro:

astro 
---
import { FloatingBottomNav } from 'astro-component-kit';
---

<BottomNavMobile>Content</BottomNavMobile>
--- import { FloatingBottomNav } from 'astro-component-kit'; --- <BottomNavMobile>Content</BottomNavMobile>

Instalación Manual

Si no estás usando el paquete npm, crea un archivo nuevo y pega el siguiente código: src/components/lib/FloatingBottomNav.astro:

astro 
---
---
<div class="bottom-nav">
  <a href="#" class="active">🏠</a>
  <a href="#">🔍</a>
  <a href="#">🔔</a>
  <a href="#">👤</a>
</div>
<style>
  .bottom-nav { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%); width: 90%; max-width: 400px; height: 60px; background: rgba(15, 23, 42, 0.8); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.1); border-radius: 30px; display: flex; justify-content: space-around; align-items: center; z-index: 1000; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
  .bottom-nav a { font-size: 1.25rem; opacity: 0.5; text-decoration: none; transition: 0.3s; }
  .bottom-nav a.active { opacity: 1; transform: translateY(-5px); }
</style>
--- --- <div class="bottom-nav"> <a href="#" class="active">🏠</a> <a href="#">🔍</a> <a href="#">🔔</a> <a href="#">👤</a> </div> <style> .bottom-nav { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%); width: 90%; max-width: 400px; height: 60px; background: rgba(15, 23, 42, 0.8); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.1); border-radius: 30px; display: flex; justify-content: space-around; align-items: center; z-index: 1000; box-shadow: 0 10px 30px rgba(0,0,0,0.5); } .bottom-nav a { font-size: 1.25rem; opacity: 0.5; text-decoration: none; transition: 0.3s; } .bottom-nav a.active { opacity: 1; transform: translateY(-5px); } </style>

Información Rápida

Categoría
Navegación
Nombre de archivo
FloatingBottomNav.astro
Dependencias
Ninguna — Astro nativo + CSS puro
Etiquetas
mobilenavigationbottom bar