A modern, responsive navigation bar with dynamic submenus, built with React and Context API. Features smooth 3D animations, mobile-first responsive design, and inspired by Strapi CMS admin panel. Perfect for practicing React hooks, global state management, and advanced UI interactions.
View Live on Netlify:
React Dynamic Navbar Demo
| 💻 Desktop View with Submenus |
 |
| 📱 Mobile View with Sidebar |
 |
| Responsive design with mobile sidebar and desktop submenus |
- Design Inspiration: UI patterns inspired by Strapi headless CMS admin panel
- Figma Design: Original design provided by course instructor View Figma Design
- Custom Implementation: Built from scratch with custom React implementation and rebranded as "Dynamic Navbar"
- Responsive Behavior: Mobile sidebar toggle and desktop hover submenus
- Dynamic Submenus -Smooth 3D flip animations on desktop hover
- Mobile-First Sidebar -Full-screen navigation for mobile devices
- Global State Management-Context API for shared state across components
- Responsive Design -Seamless transition between mobile and desktop views
- Precise Mouse Tracking -Advanced boundary detection for submenu dismissal
- Responsive Typography -Fluid text scaling with CSS clamp() for optimal readability
- Customizable Data Structure -Easy to modify menu items and structure
| Tool / Library | Purpose |
|---|---|
| ⚡ Vite | Fast build tool & dev server |
| ⚛️ React 19 | Component-based UI |
| 🎯 Context API | Global state management |
| 📋 React Icons | Icon library for menu items |
| 🔑 Nanoid | Unique ID generation |
| 🎨 CSS3 | 3D transforms, transitions, Grid |
- Context API Implementation for global state sharing
- Complex State Logic managing sidebar, submenus, and active states
- Custom Hook Creation (
useGlobalContext) with error handling
- 3D Transformations with CSS perspective and rotateX
- Smooth Transitions for sidebar and submenu animations
- Responsive Breakpoints with mobile-first approach
- Precise Mouse Event Handling with bounding client rect
- Modular Component Structure with clear separation of concerns
- Dynamic Data Rendering from external data source
- Conditional Rendering based on screen size and state
- Event Delegation Patterns for efficient event handling
- Optional Chaining for safe data access
- Dynamic Grid Layouts based on content length
- Z-index Management for proper layer stacking
- Accessibility Considerations with semantic HTML
src/
├── components/
│ ├── Navbar.jsx # Main navigation with logo and toggle
│ ├── NavLinks.jsx # Desktop navigation links
│ ├── Sidebar.jsx # Mobile sidebar navigation
│ ├── Submenu.jsx # Desktop dropdown submenus
│ └── Hero.jsx # Main content section
├── contexts/
│ ├── AppContext.js # React context creation
│ └── AppProvider.jsx # Global state provider
├── hooks/
│ └── useGlobalContext.js # Custom context hook
└── data.jsx # Menu structure and content
- Node.js ≥ 18.0.0
- npm or yarn package manager
- Clone the repository
git clone https://github.com/pro804/React-Dynamic-Navbar.git- Navigate to the project directory
cd React-Dynamic-Navbar- Install dependencies
npm install- Start the development server
npm run dev- Open http://localhost:5173 to view it in the browser.
npm run dev— Runs the development server (Vite)npm run build— Builds the app for productionnpm run preview— Previews the production build locally
This project was created for educational purposes as part of a React learning journey. This project is licensed under the MIT License. See the LICENSE file for details.