Mobile FAB Navigation Builder

Build production-ready mobile bottom navigation with FAB button following modern UI patterns for Next.js and React applications.

Architecture Overview

The mobile navigation system consists of 3 main parts:

1. Bottom Navigation Bar - Fixed bar with 4 primary nav items
2. FAB Button - Floating action button for secondary actions
3. FAB Menu - Expandable menu triggered by FAB

Quick Start

To implement mobile FAB navigation:

1. Copy the template from assets/MobileBottomNav.tsx
2. Customize navItems array with your routes
3. Customize fabMenuItems array with secondary actions
4. Import and add component to your layout
5. Adjust colors to match your brand

Component Structure

components/
└── MobileBottomNav.tsx    # Main component (copy from assets/)

Implementation Guide

Step 1: Create the Component

Copy the template from assets/MobileBottomNav.tsx to your components/ folder.

Step 2: Configure Navigation Items

Edit the navItems array:

const navItems = [
  { href: '/', icon: Home, label: 'Home' },
  { href: '/products', icon: Package, label: 'Products' },
  { href: '/cart', icon: ShoppingCart, label: 'Cart' },
  { href: '/profile', icon: User, label: 'Profile' },
];

Rules:

• Maximum 4 items for optimal UX
• Use Lucide React icons
• Keep labels short (1 word preferred)

Step 3: Configure FAB Menu Items

Edit the fabMenuItems array for secondary navigation:

const fabMenuItems = [
  { href: '/settings', icon: Settings, label: 'Settings' },
  { href: '/help', icon: HelpCircle, label: 'Help' },
  { href: '/about', icon: Info, label: 'About' },
];

Step 4: Add to Layout

In your root layout or app layout:

import MobileBottomNav from '@/components/MobileBottomNav';

export default function Layout({ children }) {
  return (
    <>
      {children}
      <MobileBottomNav />
    </>
  );
}

Step 5: Add Bottom Padding

Add padding to main content to prevent overlap:

<main className="pb-20 lg:pb-0">
  {children}
</main>

Customization Options

Color Themes

Default (Purple/Pink):

/* Nav bar gradient */
from-[rgba(78,46,140,0.85)] to-[rgba(108,66,160,0.75)]

/* FAB button */
from-[rgba(217,81,100,1)] to-[rgba(217,81,100,0.8)]

/* Active pill */
bg-[rgba(50,30,90,0.8)]

Blue Theme:

/* Nav bar gradient */
from-[rgba(37,99,235,0.85)] to-[rgba(59,130,246,0.75)]

/* FAB button */
from-[rgba(234,88,12,1)] to-[rgba(234,88,12,0.8)]

/* Active pill */
bg-[rgba(30,58,138,0.8)]

Dark Theme:

/* Nav bar gradient */
from-[rgba(24,24,27,0.95)] to-[rgba(39,39,42,0.9)]

/* FAB button */
from-[rgba(139,92,246,1)] to-[rgba(139,92,246,0.8)]

/* Active pill */
bg-[rgba(63,63,70,0.9)]

Size Adjustments

Compact (default):

• Nav bar height: h-10
• Icon size: size={16}
• FAB size: w-10 h-10

Standard:

• Nav bar height: h-14
• Icon size: size={20}
• FAB size: w-12 h-12

Large:

• Nav bar height: h-16
• Icon size: size={24}
• FAB size: w-14 h-14

Key Features

1. Hydration-Safe Rendering

The component handles SSR/hydration properly:

const [isMounted, setIsMounted] = useState(false);

useEffect(() => {
  setIsMounted(true);
}, []);

if (!isMounted) return null;

2. Active State Detection

Smart path matching for nested routes:

const isActive = (href: string) => {
  if (href === '/') return pathname === '/';
  return pathname.startsWith(href);
};

3. Glassmorphism Styling

Modern glass effect with:

• backdrop-blur-xl
• Semi-transparent backgrounds
• Border with border-white/20
• Drop shadows

4. Responsive Visibility

Desktop hiding with lg:hidden:

<nav className="... lg:hidden z-50">

5. Accessibility

Built-in ARIA labels:

role="navigation"
aria-label="Mobile navigation"
aria-label="More options"

Common Patterns

Pattern A: E-commerce App

const navItems = [
  { href: '/', icon: Home, label: 'Home' },
  { href: '/shop', icon: Store, label: 'Shop' },
  { href: '/cart', icon: ShoppingCart, label: 'Cart' },
  { href: '/account', icon: User, label: 'Account' },
];

const fabMenuItems = [
  { href: '/wishlist', icon: Heart, label: 'Wishlist' },
  { href: '/orders', icon: Package, label: 'Orders' },
  { href: '/support', icon: HeadphonesIcon, label: 'Support' },
];

Pattern B: Social App

const navItems = [
  { href: '/', icon: Home, label: 'Feed' },
  { href: '/search', icon: Search, label: 'Search' },
  { href: '/notifications', icon: Bell, label: 'Alerts' },
  { href: '/profile', icon: User, label: 'Profile' },
];

const fabMenuItems = [
  { href: '/create', icon: PlusCircle, label: 'Create Post' },
  { href: '/messages', icon: MessageCircle, label: 'Messages' },
  { href: '/settings', icon: Settings, label: 'Settings' },
];

Pattern C: Content/Blog App

const navItems = [
  { href: '/', icon: Home, label: 'Home' },
  { href: '/articles', icon: FileText, label: 'Articles' },
  { href: '/bookmarks', icon: Bookmark, label: 'Saved' },
  { href: '/profile', icon: User, label: 'Profile' },
];

const fabMenuItems = [
  { href: '/write', icon: Edit, label: 'Write' },
  { href: '/topics', icon: Hash, label: 'Topics' },
  { href: '/about', icon: Info, label: 'About' },
];

Pattern D: Directory/Alumni App (Kenavo Style)

const navItems = [
  { href: '/', icon: Home, label: 'Home' },
  { href: '/directory', icon: Users, label: 'Directory' },
  { href: '/gallery', icon: Image, label: 'Gallery' },
  { href: '/contact', icon: Mail, label: 'Contact' },
];

const fabMenuItems = [
  { href: '/about', icon: Info, label: 'About' },
];

Troubleshooting

Issue: Hydration Mismatch

Solution: Ensure isMounted check is implemented and returns null during SSR.

Issue: Navigation Not Visible

Solution: Check z-index values. Nav should be z-50. Ensure no parent has overflow: hidden.

Issue: Content Hidden Behind Nav

Solution: Add pb-20 (or appropriate padding) to main content container for mobile.

Issue: FAB Menu Not Closing

Solution: Ensure backdrop click handler calls setShowMenu(false) and FAB menu has onClick={(e) => e.stopPropagation()}.

Dependencies

• Next.js 13+ (App Router)
• React 18+
• Tailwind CSS 3+
• Lucide React icons

Install Lucide if not present:

npm install lucide-react

Mobile Responsive Pages

When implementing pages with mobile FAB navigation, ensure responsive design:

Essential Rules

1. Bottom padding - Add pb-20 lg:pb-0 to main content
2. Container - Use container mx-auto px-4 sm:px-6 lg:px-8
3. Grid - Use responsive grids: grid-cols-1 sm:grid-cols-2 lg:grid-cols-3
4. Typography - Scale text: text-sm sm:text-base lg:text-lg
5. Spacing - Responsive gaps: gap-3 sm:gap-4 lg:gap-6

Page Template

export default function Page() {
  return (
    <main className="min-h-screen pb-20 lg:pb-0">
      <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-6 sm:py-8 lg:py-12">
        {/* Hero - responsive height */}
        <section className="h-[50vh] sm:h-[60vh] lg:h-[70vh]">
          ...
        </section>

        {/* Grid - responsive columns */}
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6">
          {items.map(item => <Card key={item.id} />)}
        </div>
      </div>
    </main>
  );
}

Detailed patterns: See references/responsive-layouts.md

Reference Files

• assets/MobileBottomNav.tsx - Complete ready-to-use component template
• references/styling-guide.md - Detailed styling customization options
• references/animation-patterns.md - Animation and transition configurations
• references/responsive-layouts.md - Mobile responsive page layouts and patterns