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