glass-aura-navbar
v1.0.5
Published
Framework-agnostic glassmorphism navbar web component.
Maintainers
caveman001Readme
glass-aura-navbar
A lightweight, framework-agnostic glassmorphism navbar with an animated mobile drawer, shipped as an ES module plus TypeScript definitions.
Highlights
- Pure Web Component
<glass-navbar>plus an optional React helper component - Glassmorphism aesthetics with configurable blur, background, and rounded profile
- Responsive hamburger menu with animated slide-in drawer + backdrop
- Tree-shakeable ES module bundle, generated via Vite
- Ships standalone CSS (
import "glass-aura-navbar/styles/glass-navbar.css")
Installation
npm install glass-aura-navbar
# or
yarn add glass-aura-navbar
# or
pnpm add glass-aura-navbarQuick Start
import { defineGlassNavbar, GlassNavbar } from "glass-aura-navbar";
import "glass-aura-navbar/styles/glass-navbar.css";
defineGlassNavbar();
const navbar = document.createElement("glass-navbar") as GlassNavbar;
navbar.logo = "Glass";
navbar.links = [
{ label: "Home", href: "/" },
{ label: "Components", href: "/components" },
{ label: "Docs", href: "/docs" }
];
navbar.background = "rgba(255, 255, 255, 0.18)";
navbar.position = "sticky";
document.body.prepend(navbar);Declarative markup + script
<body>
<glass-navbar id="primary-navbar" position="fixed" height="72px"></glass-navbar>
<script type="module">
import { defineGlassNavbar } from "glass-aura-navbar";
import "glass-aura-navbar/styles/glass-navbar.css";
defineGlassNavbar();
const navbar = document.getElementById("primary-navbar");
navbar.logo = "Glass UI";
navbar.links = [
{ label: "Home", href: "/" },
{ label: "Showcase", href: "/showcase" },
{ label: "Pricing", href: "/pricing" }
];
navbar.onLinkClick = (link) => console.log(`Navigating to ${link.href}`);
</script>
</body>Props / Options
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| logo | string \| HTMLElement | undefined | Text label or custom element (e.g., img) rendered on the left. |
| links | Array<{ label: string; href: string }> | [] | Right-aligned navigation links rendered in desktop and drawer views. |
| background | string | rgba(255,255,255,0.2) | Glass backdrop color. Accepts any CSS color. |
| position | "sticky" \| "fixed" \| "relative" \| "absolute" | "sticky" | Placement strategy applied to the host element. Sticky/fixed modes auto-pin to top. |
| blur | number | 16 | Backdrop blur radius in pixels. Applied through CSS custom property. |
| rounded | boolean | true | Adds fully pill-shaped rounding when true. |
| height | string | "64px" | Navbar height and vertical rhythm (any CSS length). |
| onLinkClick | (link, event) => void | undefined | Invoked every time a navigation link is activated. You can prevent navigation via event.preventDefault(). |
Tip: All props may be set via JavaScript setters or HTML attributes (strings/booleans). Attributes take effect on connect, while setters react immediately.
React / Next.js Usage
You can skip manual custom-element typing by using the bundled React wrapper.
// app/layout.tsx or pages/_app.tsx
import "glass-aura-navbar/styles/glass-navbar.css";
// components/PrimaryNavbar.tsx
"use client";
import { GlassNavbarReact } from "glass-aura-navbar";
const links = [
{ label: "Home", href: "/" },
{ label: "Components", href: "/components" },
{ label: "Docs", href: "/docs" }
];
export function PrimaryNavbar() {
return (
<GlassNavbarReact
logo="Glass UI"
links={links}
position="sticky"
height="72px"
blur={18}
onLinkClick={(link) => console.log("Navigate", link.href)}
/>
);
}The wrapper automatically registers the custom element, syncs props/links, and forwards refs (React.forwardRef<GlassNavbar>), so you can call imperative APIs if needed.
Styling
- The component exposes CSS variables on the host element:
--glass-navbar-bg,--glass-navbar-height,--glass-navbar-blur,--glass-navbar-gap, and--glass-navbar-padding-inline. - Toggle the pill silhouette by setting
rounded="false"ornavbar.rounded = false. - Import the distributable CSS once per app:
import "glass-aura-navbar/styles/glass-navbar.css";.
Example Project Snippet
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Glass Navbar Demo</title>
<script type="module">
import { defineGlassNavbar } from "glass-aura-navbar";
import "glass-aura-navbar/styles/glass-navbar.css";
defineGlassNavbar();
const navbar = document.querySelector("glass-navbar");
navbar.logo = "Glass";
navbar.links = [
{ label: "Overview", href: "#overview" },
{ label: "Features", href: "#features" },
{ label: "Contact", href: "#contact" }
];
</script>
</head>
<body>
<glass-navbar position="sticky" rounded="true" blur="18"></glass-navbar>
<main style="height:200vh"></main>
</body>
</html>Development
npm install
npm run dev # playground / story workbench if desired
npm run build # outputs dist/ with ESM, CJS, CSS, and .d.tsLicense
MIT