@ar-dacity/ardacity-navbar

ArDacity NavBar

A modern, responsive navigation bar component for React applications with Arweave wallet integration.

Features

• 🎨 Multiple style variants (default, minimal, transparent, accent, glass)
• 📱 Fully responsive design with mobile menu
• 💰 Built-in Arweave wallet integration
• ✨ Subtle animations and effects
• 🌙 Dark mode compatibility
• 🧩 Customizable with Tailwind CSS

Installation

npm install @ar-dacity/ardacity-navbar

Usage

import { ArDacityNavBar } from '@ar-dacity/ardacity-navbar';
// OR use default import
// import ArDacityNavBar from '@ar-dacity/ardacity-navbar';

function App() {
  return (
    <div>
      <ArDacityNavBar 
        links={[
          { label: 'Home', href: '/', isActive: true },
          { label: 'About', href: '/about' },
          { label: 'Projects', href: '/projects' },
          { label: 'Contact', href: '/contact' }
        ]}
        showWalletButton={true}
      />
      
      {/* Rest of your app */}
      <main className="container mx-auto p-4">
        <h1 className="text-2xl font-bold">Welcome to my dApp</h1>
      </main>
    </div>
  );
}

Props

Prop	Type	Default	Description
brand	ReactNode	"ArDacity"	Logo or brand element
links	Array	[]	Navigation links
actions	ReactNode	undefined	Additional elements for the right side
showWalletButton	boolean	true	Whether to show wallet connect button
walletButtonProps	Object	undefined	Props for the wallet button component
variant	string	'default'	Navbar style variant
position	string	'sticky'	Navbar position
className	string	''	Additional CSS classes
mobileMenuClassName	string	''	Additional CSS classes for mobile menu
themeColor	string	undefined	Custom theme color for accent variant

Variants

Default

Standard white/dark navigation bar with subtle shadow on scroll.

Minimal

Transparent navigation bar that adds a subtle background on scroll.

Transparent

Fully transparent navigation bar with no background.

Accent

Colored navigation bar using the primary theme color.

Glass

Modern glass-like effect with blur backdrop.

Examples

// Glass variant
<ArDacityNavBar 
  variant="glass"
  links={[/* your links */]}
/>

// Accent variant with custom color
<ArDacityNavBar 
  variant="accent"
  themeColor="bg-purple-600" 
  links={[/* your links */]}
/>

// Fixed position
<ArDacityNavBar 
  position="fixed"
  links={[/* your links */]}
/>

// Custom brand/logo
<ArDacityNavBar
  brand={
    <div className="flex items-center">
      <img src="/logo.svg" alt="Logo" className="h-8 w-auto" />
      <span className="ml-2 text-xl font-bold">MyApp</span>
    </div>
  }
  links={[/* your links */]}
/>

Tailwind CSS

This component is designed to work with Tailwind CSS. Make sure you have Tailwind CSS set up in your project.

License

MIT