JSPM – @ar-dacity/ardacity-navbar@0.1.0

Package Exports

@ar-dacity/ardacity-navbar
@ar-dacity/ardacity-navbar/dist/index.esm.js
@ar-dacity/ardacity-navbar/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@ar-dacity/ardacity-navbar) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

@ar-dacity/ardacity-navbar