react-navbar - Enhanced Accessible Navigation Bar

This project provides a flexible, customizable, and highly accessible navigation bar component built with React and Tailwind CSS. It has been significantly enhanced by integrating Radix UI Primitives to ensure robust accessibility (A11Y) and advanced features.

✨ Features

• Enhanced Accessibility (A11Y): Leverages Radix UI for correct focus management, keyboard navigation, and ARIA attributes.
• Mobile Menu: Rebuilt using Radix Dialog for a superior, accessible mobile experience.
• User Profile Dropdown: Optional NavbarUser component for an accessible user menu.
• Command Palette Search: Optional NavbarSearch component providing a modern, command-palette style search interface.
• Improved CLI: A powerful Command Line Interface for easy installation of core and optional components.

🛠️ Installation

The component is designed to be installed directly into your project's source code using the provided CLI tool.

1. Install Dependencies

First, ensure you have the necessary peer dependencies installed:

npm install react react-dom class-variance-authority clsx tailwind-merge

2. Use the CLI to Install Components

Use the npx command to run the CLI tool and copy the component files into your project.

npx add-navbar --dir components/ui/navbar

Installing Optional Features

You can include the advanced features using the following flags:

Flag	Description	Required Radix UI Dependency
--with-user-dropdown	Includes the NavbarUser component (User Profile Dropdown).	@radix-ui/react-dropdown-menu
--with-search	Includes the NavbarSearch component (Command Palette style search).	@radix-ui/react-dialog

Example: Full Installation

To install the core component, the user dropdown, and the search component into src/components/ui/navbar:

npx add-navbar --dir src/components/ui/navbar --with-user-dropdown --with-search

Important: After running the CLI, it will provide clear instructions on which Radix UI packages you need to install to support the optional components you selected.

💡 Usage Example

Here is a comprehensive example demonstrating how to use the core and optional components together:

import { 
  Navbar, 
  NavbarLogo, 
  NavbarContent, 
  NavbarMobile 
} from '@/components/ui/navbar/navbar'; // Adjust path based on your --dir flag

// Import optional components
import { NavbarUser, NavbarUserItem, NavbarUserSeparator } from '@/components/ui/navbar/navbar-user';
import { NavbarSearch } from '@/components/ui/navbar/navbar-search';

function App() {
  return (
    <div className="min-h-screen">
      <Navbar variant="default" sticky>
        <NavbarContent>
          <NavbarLogo href="/">
            <span className="text-xl font-bold">My App</span>
          </NavbarLogo>
        </NavbarContent>

        {/* Desktop Navigation */}
        <NavbarContent className="hidden md:flex">
          <ul className='flex gap-4 items-center'>
            <li><a href="/features" className="text-gray-600 hover:text-gray-900">Features</a></li>
            <li><a href="/pricing" className="text-gray-600 hover:text-gray-900">Pricing</a></li>
            
            {/* 1. Command Palette Search */}
            <li><NavbarSearch placeholder="Search (Cmd+K)" /></li>
            
            {/* 2. User Profile Dropdown */}
            <li>
              <NavbarUser avatarUrl="/path/to/avatar.jpg" userName="John Doe">
                <NavbarUserItem>Profile</NavbarUserItem>
                <NavbarUserItem>Settings</NavbarUserItem>
                <NavbarUserSeparator />
                <NavbarUserItem>Log Out</NavbarUserItem>
              </NavbarUser>
            </li>
          </ul>
        </NavbarContent>

        {/* Mobile Navigation */}
        <NavbarContent className="md:hidden">
          {/* 3. Accessible Mobile Menu */}
          <NavbarMobile side="right">
            <div className="flex flex-col gap-4">
              <a href="/features">Features</a>
              <a href="/pricing">Pricing</a>
              <a href="/about">About</a>
              <NavbarSearch placeholder="Search" />
            </div>
          </NavbarMobile>
        </NavbarContent>
      </Navbar>
      {/* ... rest of your application */}
    </div>
  );
}

🧩 Component API Reference

1. Core Components (navbar.tsx)

Component	Description	Props
Navbar	The root container for the navigation bar.	variant: 'default' | 'transparent' | 'colored', sticky: boolean, className: string
NavbarLogo	Component for the brand or logo.	href: string (optional), children: ReactNode
NavbarContent	A flexible container for grouping navigation items (e.g., left, center, right groups).	className: string, children: ReactNode
NavbarTrigger	The button element used to trigger the mobile menu (automatically used inside NavbarMobile).	className: string, children: ReactNode
NavbarMobile	The accessible, Radix-powered mobile menu wrapper.	side: 'top' | 'right' | 'bottom' | 'left' (controls slide direction), children: ReactNode

2. Optional Components

NavbarUser (navbar-user.tsx)

A component for an accessible user profile dropdown menu.

Component	Description	Props
NavbarUser	The main component wrapping the avatar and dropdown.	avatarUrl: string, userName: string, children: ReactNode (Dropdown items)
NavbarUserItem	A clickable item within the dropdown menu.	Extends DropdownMenu.DropdownMenuItemProps
NavbarUserSeparator	A visual separator line within the dropdown.	-

NavbarSearch (navbar-search.tsx)

A component that triggers a Command Palette style search dialog.

Component	Description	Props
NavbarSearch	The button that opens the search dialog. Supports Cmd+K / Ctrl+K shortcut.	placeholder: string, className: string

⚙️ Development

To run the project locally for development or testing:

1. Install dependencies: npm install
2. Run the development server: npm run start

📄 License

MIT