Navigation mobilenavigationbottom bar

Floating Bottom Nav

Icon-based navigation bar fixed to the bottom, optimized for mobile.

🏠 🔍 🔔 👤

Usage

Copy the full block below to use this component with its imports.

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

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

Manual Installation

If you are not using the npm package, create a new file src/components/lib/FloatingBottomNav.astro and paste the following code:

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>

Quick Info

Category
Navigation
Filename
FloatingBottomNav.astro
Dependencies
None — pure Astro + CSS
Tags
mobilenavigationbottom bar