1 GitHub star = 1 new component.

Star the repo
Navigationmobilenavigationbottom bar

Floating Bottom Nav

Fixed bottom navigation bar for mobile web apps.

πŸ πŸ”πŸ””πŸ‘€

Usage

Copy and paste this code into your React component:

tsx
import { BottomNavMobile } from 'react-component-kit-ui/navigation';

<BottomNavMobile>Content</BottomNavMobile>

Manual Installation

If you are not using the npm package, create a new file and paste the following code: src/components/BottomNavMobile.tsx + BottomNavMobile.css:

BottomNavMobile.tsx
'use client';

import './BottomNavMobile.css';

/** BottomNavMobile β€” ported from astro-component-kit. */
export interface BottomNavMobileProps {
}

export function BottomNavMobile({}: BottomNavMobileProps) {
  return (
    <>
      <div className="bottom-nav" data-rk-0f9377="">
        <a href="#" className="active" data-rk-0f9377="">🏠</a>
        <a href="#" data-rk-0f9377="">πŸ”</a>
        <a href="#" data-rk-0f9377="">πŸ””</a>
        <a href="#" data-rk-0f9377="">πŸ‘€</a>
      </div>
    </>
  );
}

export default BottomNavMobile;
BottomNavMobile.css
/* BottomNavMobile β€” ported from astro-component-kit (navigation/BottomNavMobile.astro) */

.bottom-nav:where([data-rk-0f9377]) { 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:where([data-rk-0f9377]) a:where([data-rk-0f9377]) { font-size: 1.25rem; opacity: 0.5; text-decoration: none; transition: 0.3s; }
.bottom-nav:where([data-rk-0f9377]) a.active:where([data-rk-0f9377]) { opacity: 1; transform: translateY(-5px); }

Quick Info

Category
Navigation
Filename
BottomNavMobile.tsx
Dependencies
None β€” pure React + CSS
Tags
mobilenavigationbottom bar