Navbar

PRO

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

Unlock advanced capabilities with the Pro version

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

moonui add navbar

Usage

Pro Required

Main Content

Your application content goes here

Examples

Basic Navbar

PRO

Simple navigation bar with basic items

Pro Required

Content Area

Click items to navigate

With Mega Menu

PRO

Navigation with dropdown mega menus

Pro Required

Mega Menu Navigation

Hover over Products or Developers to see mega menus

With Command AI Integration

PRO

Navbar with Command AI for quick navigation and actions

Pro Required

Command AI Enabled

Click the search bar or press ⌘K to open Command AI

• Quick navigation to any page

• Execute actions directly from the command palette

• Search through all available commands

• Keyboard-first navigation with arrow keys

With User Menu & Notifications

PRO

Full-featured navbar with user profile and notifications

Pro Required

Full-Featured Navbar

Try searching, changing theme, or checking notifications

Complex Navigation

PRO

Advanced navbar with multiple sections and features

Pro Required

Complex Navigation

Try hovering over Products, Solutions, or Resources

E-commerce Navbar

PRO

Professional e-commerce navigation with cart and categories

Pro Required

E-commerce Navigation

Professional shopping experience

Centered Navigation

PRO

Navigation items centered with new navItemsPosition prop

Pro Required

Centered Navigation

Navigation items are centered, logo stays left

Minimal Mode with Scroll

PRO

Navbar shrinks to minimal mode on scroll with new scrollBehavior prop

Pro Required

Minimal Mode on Scroll

Scroll down to see the navbar transform into minimal mode - it shrinks, hides the logo text, and centers the navigation items.

Section 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Section 2

Section 3

Section 4

Section 5

Section 6

Section 7

Section 8

Section 9

Section 10

Button Style Theme Toggle

PRO

Direct theme toggle button instead of dropdown menu

Pro Required

Button Style Theme Toggle

Click the theme toggle to switch directly between light and dark modes. No dropdown menu - just a simple, animated button toggle.

Toggle between light and dark modes with the button

SaaS Platform Navbar

PRO

Modern SaaS navigation with product features

Pro Required

SaaS Platform Navigation

Modern and feature-rich navigation

Minimal Floating Navbar

PRO

Clean minimal navbar with floating design

Pro Required

Minimal Floating Design

Clean and elegant navigation

Modern Floating Centered

PRO

Ortalanmış, glassmorphism efektli modern navbar (React Bits style)

Pro Required

Modern Centered Design

Perfect for landing pages and modern web applications with glassmorphism effects

🎨

Glassmorphism

Modern transparent design with blur effects

📱

Responsive

Works perfectly on all screen sizes

📍

Sticky Position

Stays visible while scrolling

🎯

Centered Layout

Perfectly centered navigation items

🌙

Dark Mode

Beautiful in both light and dark themes

✨

Animations

Smooth transitions and effects

Keep Scrolling

Notice how the navbar becomes more compact as you scroll down. This is the minimal mode in action!

The navbar transitions smoothly from my-4 to my-2, max-w-5xl to max-w-4xl, and px-6 to px-4.

More Features

This variant is perfect for landing pages, marketing sites, and modern web applications.

Full Width Dashboard Navbar

PRO

Edge-to-edge navigation for dashboards and admin panels

Pro Required

Total Revenue

$54,239

Active Users

2,543

Server Status

Online

Corporate Navbar with Scroll Features

PRO

Professional navbar with hide on scroll and progress indicator

Pro Required

Corporate Excellence

Scroll down to see the navbar hide on scroll and the progress indicator.

Section 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Section 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Section 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Section 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Section 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Section 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Section 7

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Section 8

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Overlay Mode with Background

PRO

Floating navbar that overlays background content without pushing it down - perfect for hero sections

Pro Required

Overlay Mode

Navbar overlays content without pushing it down

overlayMode={true} makes the navbar absolute positioned

Auto-Expand & Container Width

PRO

Control navbar overflow behavior and container width for different layouts

Pro Required

Auto-Expand Demo

Navbar auto-expands to fit all items when autoExpand={true}

Try different containerMaxWidth values to see the effect

Progress Bar Inside Border-Radius

PRO

Professional scroll progress bar that respects navbar's border-radius

Pro Required

Progress Bar Inset

Scroll down to see the progress bar stay inside the navbar's border-radius.

Section 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Section 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Section 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Section 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Section 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Section 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Section 7

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Section 8

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Section 9

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Section 10

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.