Navbar
A professional navigation bar component with mega menus, search functionality, user profile, notifications, and responsive mobile design. Perfect for modern applications and dashboards.
Pro features
What the Pro version adds to this component.
Command Palette Search
Built-in command palette with keyboard shortcuts for quick navigation
Mega Menus
Rich dropdown menus with icons, descriptions, and custom layouts
Notifications System
Integrated notifications dropdown with unread indicators and actions
User Management
Built-in user menu with avatar, profile options, and authentication
Responsive Design
Adaptive layout with mobile menu, touch gestures, and optimal UX
Visual Effects
Glassmorphism, animated backgrounds, and smooth transitions
Installation
Install via CLI
npx @moontra/moonui-cli add navbarUsage
Main Content
Your application content goes here
Examples
Basic Navbar
Simple navigation bar with basic items
With Mega Menu
Navigation with dropdown mega menus
With Command AI Integration
Navbar with Command AI for quick navigation and actions
With User Menu & Notifications
Full-featured navbar with user profile and notifications
Complex Navigation
Advanced navbar with multiple sections and features
E-commerce Navbar
Professional e-commerce navigation with cart and categories
Centered Navigation
Navigation items centered with new navItemsPosition prop
Minimal Mode with Scroll
Navbar shrinks to minimal mode on scroll with new scrollBehavior prop
Button Style Theme Toggle
Direct theme toggle button instead of dropdown menu
SaaS Platform Navbar
Modern SaaS navigation with product features
Minimal Floating Navbar
Clean minimal navbar with floating design
Modern Floating Centered
A centered, modern navbar with a glassmorphism effect (React Bits style)
Full Width Dashboard Navbar
Edge-to-edge navigation for dashboards and admin panels
Corporate Navbar with Scroll Features
Professional navbar with hide on scroll and progress indicator
Overlay Mode with Background
Floating navbar that overlays background content without pushing it down - perfect for hero sections
Auto-Expand & Container Width
Control navbar overflow behavior and container width for different layouts
Progress Bar Inside Border-Radius
Professional scroll progress bar that respects navbar's border-radius
Different Sizes
Size controls not just navbar height, but automatically scales all content (text, icons, buttons, spacing) proportionally. Perfect for brand prominence and visual hierarchy.
Floating Auto-Hide Navbar
Modern navbar that auto-hides on scroll down with smooth animations (same as main project header)