Navigation Bars

The following navigation bar component is used for displaying navigation links. It is a single component and can be easily customized without much hassle or complexity. You can define a logo and it manages the navigation links in terms of right and left.

Dependencies

No extra libraries required. Assuming you have Tailwind CSS installed

Usage

App.jsx

// App.jsx
import React, { useState } from 'react';
import Navbar from './components/nav';

const App = () => {
  return (
    <div>
      <Navbar
        logo="https://via.placeholder.com/150" // Logo URL
        className="bg-gray-100" // Additional styles if needed
      >
        <a href="#" className="text-gray-700 hover:text-blue-600 transition">Home</a>
        <a href="#" className="text-gray-700 hover:text-blue-600 transition">About</a>
        <a href="#" className="text-gray-700 hover:text-blue-600 transition">Services</a>
        <a href="#" className="text-gray-700 hover:text-blue-600 transition">Contact</a>
      </Navbar>
      <main className="p-8">
        <h1 className="text-2xl font-bold">Welcome</h1>
        <p>Main content</p>
      </main>
    </div>
  );
}

export default App;

Component

nav.jsx

// Navbar.jsx
import React, { useState } from 'react';

const Navbar = ({ logo, children, className = '' }) => {
  const [isMobileMenuOpen, setMobileMenuOpen] = useState(false);

  const toggleMobileMenu = () => {
    setMobileMenuOpen(!isMobileMenuOpen);
  };

  return (
    <nav className={`bg-white shadow ${className}`}>
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between items-center py-4">
          <div className="flex items-center space-x-4">
            {logo && (
              <img src={logo} alt="Logo" className="h-8 w-auto" />
            )}
          </div>
          <div className="hidden md:flex space-x-8">
            {React.Children.map(children, (child) => (
              <div className="flex">{child}</div>
            ))}
          </div>
          <div className="md:hidden">
            <button
              onClick={toggleMobileMenu}
              className="text-gray-700 focus:outline-none"
            >
              {/* Mobile menu button */}
              <svg
                className="w-6 h-6"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16m-7 6h7" />
              </svg>
            </button>
          </div>
        </div>
      </div>
      {/* Mobile Menu */}
      {isMobileMenuOpen && (
        <div className="md:hidden bg-white shadow">
          <div className="flex flex-col space-y-4 p-4">
            {React.Children.map(children, (child) => (
              <div>{child}</div>
            ))}
          </div>
        </div>
      )}
    </nav>
  );
};

export default Navbar;