Navbar

Overview

The Navbar component is a versatile and animated navigation bar that supports multiple styles, animations, and layouts. Built with Framer Motion, it offers smooth animations and various interactive features including submenu support and spotlight effects.

Preview

Preview

Code

import { Navbar } from './components/ui';

function NavbarDemo() {
  return (
    <Navbar variant="default" size="md">
      <div className="flex gap-4">
        <Button>Home</Button>
        <Button>About</Button>
        <Button>Contact</Button>
      </div>
    </Navbar>
  );
}

Installation

npm

npx @mindfiredigital/ignix-ui add navbar

yarn

yarn @mindfiredigital/ignix-ui add navbar

pnpm

pnpm @mindfiredigital/ignix-ui add navbar

Usage

Import the component:

import { Navbar } from './components/ui';

Basic Usage

function BasicNavbar() {
  return (
    <Navbar variant="default" size="md">
      <div className="flex gap-4">
        <Button>Home</Button>
        <Button>About</Button>
        <Button>Contact</Button>
      </div>
    </Navbar>
  );
}

Variants

Preview

Code

<Navbar variant="default" animationType="slide">
  <div className="flex gap-4">
    <Button>Home</Button>
    <Button>About</Button>
    <Button>Contact</Button>
  </div>
</Navbar>

Responsive Navigation

Create a responsive navigation bar that adapts to different screen sizes:

import { useState } from 'react';
import { Menu, X } from 'lucide-react';

function ResponsiveNavbar() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <Navbar variant="default" size="md">
      <div className="flex justify-between w-full">
        <div className="flex gap-4 items-center">
          <Button>Logo</Button>
        </div>
        
        {/* Mobile menu button */}
        <button
          className="md:hidden"
          onClick={() => setIsOpen(!isOpen)}
        >
          {isOpen ? <X /> : <Menu />}
        </button>

        {/* Desktop menu */}
        <div className="hidden md:flex gap-4">
          <Button>Home</Button>
          <Button>About</Button>
          <Button>Contact</Button>
        </div>

        {/* Mobile menu */}
        {isOpen && (
          <div className="absolute top-16 left-0 right-0 bg-white md:hidden">
            <div className="flex flex-col gap-2 p-4">
              <Button>Home</Button>
              <Button>About</Button>
              <Button>Contact</Button>
            </div>
          </div>
        )}
      </div>
    </Navbar>
  );
}