Navigation Component - Apple Liquid Glass Design

A modern, elegant React navigation component inspired by Apple's liquid glass design aesthetic. Built with Vite and featuring smooth animations, glassmorphism effects, and interactive tab switching.

Project Overview

This project showcases a premium navigation bar component that combines cutting-edge UI design patterns with smooth interactions. The navigation bar features a frosted glass appearance with liquid-like effects, creating a sophisticated and polished user experience similar to Apple's design language.

Features

🎨 Design Features

• Liquid Glass Effect: Utilizes the Vaso library to create stunning glassmorphism with liquid distortion effects
• Backdrop Blur: Real-time blur effects using backdrop-blur-xl for a premium appearance
• Gradient Overlays: Customizable gradient backgrounds that adapt based on the active state
• Smooth Border Styling: Semi-transparent white borders (40% opacity) for subtle separation
• Responsive Design: Adapts seamlessly to different screen sizes

⚙️ Functionality Features

• Animated Pill Indicator: Dynamic highlight that smoothly animates between active tabs using cubic-bezier easing curves
• Tap Animations: Icon and text scale up on active state for visual feedback
• Icon Support: Pre-built SVG icons (Home, Search, Notifications, Profile, Scan)
• Dynamic Color Picker: Real-time color customization with hex color picker - choose any color for your navigation
• Manual Gradient Control: Custom two-color gradient selection for precise color control over start and end colors
• Solid/Transparent Modes: Toggle between solid and semi-transparent gradients for the center button
• Featured Center Button: Special "big" button option for prominent actions (like Scan)
• Custom Tab Items: Flexible configuration to add custom navigation items with custom icons

🎯 Interactive Elements

• Smart Tab Switching: Seamless transitions between navigation items
• Hover Effects: Text color changes and icon scaling on interaction
• Active State Styling: Clear visual feedback showing the current active tab
• Resize Responsiveness: Automatically updates layout on window resize

Technical Stack

• React: Component-based UI library
• Vite: Modern frontend build tool
• Tailwind CSS: Utility-first CSS framework
• Vaso: Library for creating liquid glass effects
• JavaScript (ES6+): Modern JavaScript features

Component Props

<Navigation 
  activeTab="home"                    // Currently active tab ID
  onNavigate={handleNav}              // Callback when tab is clicked
  accentColor="#3b82f6"               // Hex color for navigation (default: blue)
  gradientStart="#3b82f6"             // Optional: Manual gradient start color
  gradientEnd="#2563eb"               // Optional: Manual gradient end color
  solidBigButton={false}              // Optional: Use solid gradient for big button
  items={customItems}                 // Custom navigation items
  icons={customIcons}                 // Custom SVG icons
/>

Prop Details

• accentColor: Any valid hex color code (e.g., #3b82f6, #ec4899)
• gradientStart/gradientEnd: When both are provided, creates a custom two-color gradient
• solidBigButton: When true, uses full opacity gradient; when false, uses semi-transparent gradient
• items: Array of navigation items with id, icon, label, and optional big properties
• icons: Object mapping icon names to React SVG elements

Default Navigation Items

• Home: Navigation home page
• Alerts: Notifications and alerts
• Scan: Featured center button for scanning
• Search: Global search functionality
• Profile: User profile access

Key Implementation Details

Dynamic Pill Animation

The component uses useLayoutEffect to calculate and animate the active tab indicator in real-time, ensuring pixel-perfect positioning regardless of screen size or content changes.

Liquid Glass Rendering

Built on the Vaso library with customizable parameters:

• blur: Controls the blur intensity (1.6 for background, 0.5 for active state)
• depth: Controls the depth perception (2.0 for main, 0.1 for active state)
• radius: Rounded corner radius value

Color Customization

The component supports three color modes:

1. Single Color Mode (Default)

• Uses a dynamic hex color picker
• Automatically generates gradient with opacity variations
• Example: accentColor="#3b82f6"

2. Manual Gradient Mode

• Full control over both gradient colors
• Set start and end colors independently
• Example: gradientStart="#3b82f6" gradientEnd="#2563eb"

3. Solid/Transparent Toggle

• Control opacity of the big button gradient
• Toggle between solid (full opacity) and transparent (with opacity) modes
• Example: solidBigButton={true}

File Structure

vite-project/
├── src/
│   ├── components/
│   │   └── Navigation.jsx      # Main navigation component
│   ├── pages/
│   │   └── Pages.jsx           # Page components
│   ├── App.jsx                 # Main application component
│   ├── style.css               # Global styles
│   └── main.jsx                # React entry point
├── public/                      # Static assets
├── index.html                  # HTML template
├── main.js                     # JavaScript entry point
├── vite.config.js              # Vite configuration
├── package.json                # Project dependencies
└── style.css                   # Root styles

Browser Support

Works best on modern browsers supporting:

• CSS Backdrop Filters
• CSS Grid and Flexbox
• React 16.8+ (Hooks API)
• ES6+ JavaScript

Notes

• The component is fixed to the bottom of the viewport for easy access
• Suspension fallbacks are provided for Vaso rendering with lightweight alternatives
• All animations use optimized cubic-bezier timing functions for smooth visual feedback
• The design is mobile-friendly and touch-optimized