asafarim-navlinks/DEMO_GUIDE.md

A versatile React navigation component with unlimited multi-level dropdowns, four alignment options, mobile responsiveness, and customizable styling. Perfect for modern web applications.

# 🚀 ASafariM NavLinks Demo - Quick Start Guide

## Demo is Ready! 🎉

Your comprehensive React TypeScript demo for the `asafarim-navlinks` package is now set up and running!

## What's Included

The demo showcases all the features of your navigation component:

### 🎯 **Basic Navigation**
- Clean, simple navigation links
- Customizable styling with CSS

### 🎨 **Icon Support** 
- Font Awesome icons on left and right sides
- Professional-looking navigation items

### 😊 **Emoji Support**
- Fun emojis as visual indicators
- Modern, playful navigation style

### 📁 **Dropdown Menus**
- Multi-level nested navigation
- Smooth dropdown interactions
- Nested sub-menus support

### 🖼️ **SVG/Logo Support**
- Custom SVG icons and logos
- Brand integration capabilities
- Flexible image sizing and styling

### ⚙️ **Alignment Options**
- Right-aligned navigation
- Bottom-aligned navigation
- Flexible positioning

## Running the Demo

```bash
# From the main package directory
pnpm run demo

# Or from the demo directory
cd demo
pnpm dev
```

## Demo Features

- **Live Examples**: See all component features in action
- **Code Examples**: Copy-paste ready code snippets
- **Interactive**: Click on dropdowns and navigation items
- **Responsive**: Works on different screen sizes
- **Modern UI**: Clean, professional design

## Using in Your Project

```bash
# Install the package
pnpm add asafarim-navlinks

# Import and use
import NavLinks, { NavLinkType } from 'asafarim-navlinks';

const navData: NavLinkType[] = [
  { label: 'Home', href: '/' },
  { label: 'About', href: '/about' }
];

<NavLinks links={navData} />
```

## Demo URL

The demo is running at: **http://localhost:3000**

## Next Steps

1. **Explore the Demo**: Navigate through all the examples
2. **Copy Code**: Use the provided code snippets in your projects
3. **Customize**: Modify the examples to fit your needs
4. **Share**: Show off your navigation component!

---

**Happy Coding! 🎉**

Built with ❤️ by Ali Safari