msk17-navbar

A modern, reusable, and highly customizable Navbar component for Angular v19+ applications.
Built to be lightweight, responsive, and easy to integrate.

✨ Features

• ✅ Designed for Angular v19+
• 🧩 Standalone reusable component
• 🎨 Customizable logo, width, and height
• 🔀 Supports left and right menu configuration
• 🚀 Angular Router compatible
• 📱 Responsive-ready layout
• ⚡ Lightweight and production-ready

📦 Installation

Install the package using npm:

npm install msk17-navbar

🚀 Usage

1️⃣ Define menu data in your component (TypeScript)

leftMenu = [
  { label: 'Product', route: '/' },
  { label: 'Docs', route: '/' },
  { label: 'Enterprise', route: '/' }
];

rightMenu = [
  { label: 'Pricing', route: '/' },
  { label: 'GitHub' },
  { label: 'Login' }
];

2️⃣ Use the navbar component in HTML

<msk17-navbar
  [logoSrc]="'favicon.ico'"
  [logoWidth]="50"
  [leftMenu]="leftMenu"
  [rightMenu]="rightMenu"
  [navheight]="70"
  [navwidth]="500">
</msk17-navbar>

⚙️ Component Inputs

| Input | Type | Required | Description | |--------------|----------|----------|-------------| | logoSrc | string | Yes | Path to the logo image | | logoWidth | number | No | Logo width in pixels | | leftMenu | Menu[] | Yes | Left-side menu items | | rightMenu | Menu[] | Yes | Right-side menu items | | navheight | number | No | Navbar height | | navwidth | number | No | Navbar maximum width |

🧩 Menu Interface

interface Menu {
  label: string;
  route?: string;
}

• label → Text displayed in navbar
• route → Angular Router path (optional)

🔀 Router Support

This component works seamlessly with Angular Router.

<h1 routerLink="/product">Go to Product</h1>

Ensure RouterModule is configured in your application.

🎨 Customization

You can customize the navbar by:

• Adjusting height using navheight
• Controlling width using navwidth
• Using your own logo via logoSrc
• Dynamically changing menu items
• Extending styles with CSS or Tailwind CSS

✅ Compatibility

• Angular v19+
• Standalone components supported
• Angular Router supported

👤 Author

Manish Sadashiv Khandagale
GitHub: https://github.com/MANISHKHANDAGALE

📄 License

MIT License

⭐ Support

If you find this package useful, please consider giving it a ⭐ on GitHub.
Issues and contributions are welcome.