Glass Navbar

A responsive, glass-morphism styled navigation bar for React projects.
Built with Tailwind CSS, simple to use, and customizable.

⚡ Installation

Make sure your React project has Tailwind CSS installed.
(If not, follow the Tailwind setup guide).

Then install the package:

npm install glass-navbar

Usage

Here’s a sample usage inside your React component:

import React from "react";
import GlassNavbar from "glass-navbar"; 

const navItems = [
  {
    name:"Experience",
    link:"#experience"
  },
  {
    name:"Projects",
    link:"#projects"
  },
  {
    name:"LinkedIn",
    link:"https://linkedin.com/in/tulasidhar"
  },  
  {
    name:"Google",
    link:"https://google.com/"
  },  
];

function App() {
  return (
    <div className="App">
      <GlassNavbar 
        navItems={navItems}
        logoText={"Glass Nav"} 
        logoTextFull={"Glass Nav by Tulasidhar"} 
      />
    </div>
  );
}

export default App;

Links Behavior

External Links (with https://)
→ Open in a new browser tab.

Section Links (with #id)
→ Smooth scroll / jump to the section of the page with that id.

Responsive Logo

    On smaller screens → shows short logo text (logoText)

    On larger screens → shows full logo text (logoTextFull)

Styling

The component uses Tailwind CSS classes internally. You can safely extend or override Tailwind styles in your project for full customization.

🎥 👉 Watch full demo video on YouTube

Built with 🧠 & ♥️ by Tulasidhar Mulakaluri