glass-aura-navbar

v1.2.1

Published

6 months ago

Framework-agnostic glassmorphism navbar web component.

0High
0Medium
0Low

caveman001

navbar glassmorphism web-component ui responsive

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, color, 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-navbar

Quick 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 \| { src: string; alt?: string; width?: number \| string; height?: number \| string; className?: string } | undefined | Text, an existing element, or a simple image config 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. | | color | string | #0f172a | Foreground/text color applied via --glass-navbar-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). | | fullWidth | boolean | true | When position is sticky/fixed, pins the navbar edge-to-edge (sets left/right: 0). Set to false if you want Tailwind/custom width utilities to fully control placement. | | 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.

Using an Image Logo

Pass a lightweight config object to the logo prop and point it at a static asset:

<GlassNavbarReact
	logo={{ src: "/logo.svg", alt: "Glass Aura", height: 32 }}
	links={links}
/>;

Place the file inside your bundler's public assets folder (e.g., public/logo.svg in Vite/Next.js) so it is served at /logo.svg, or provide an absolute URL/CDN path. The same object works in vanilla JavaScript: navbar.logo = { src: "/brand.svg", alt: "Brand" };.

Combining Logo Image + Text

If you want an icon and label together, build a wrapper element and pass it through the logo prop. In React you can memoize it so the DOM node is stable:

const logoNode = useMemo(() => {
	const wrapper = document.createElement("span");
	wrapper.className = "flex items-center gap-2 font-semibold";
	const img = document.createElement("img");
	img.src = "/logo.svg";
	img.alt = "Glass Aura";
	img.height = 28;
	wrapper.append(img, document.createTextNode("Glass Aura"));
	return wrapper;
}, []);

<GlassNavbarReact logo={logoNode} links={links} />;

The same approach works without React:

const wrapper = document.createElement("div");
wrapper.append(imgElement, document.createTextNode("Glass Aura"));
navbar.logo = wrapper;

Because the component simply appends whatever HTMLElement you supply, the logo slot can host any markup you need.

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.
Control foreground contrast with --glass-navbar-color (or the new color prop/attribute) and tweak the frosted panel via --glass-navbar-blur.
Toggle the pill silhouette by setting rounded="false" or navbar.rounded = false.
Import the distributable CSS once per app: import "glass-aura-navbar/styles/glass-navbar.css";.
The navbar takes the width of its parent by default, flexes responsively, and respects any width utilities/classes you apply. If you need a fixed/sticky navbar that isn't edge-to-edge, set fullWidth={false} (or full-width="false") and then use your preferred Tailwind width classes.
The drawer/backdrop mount at higher z-indices than the navbar shell, only render up to the 768px breakpoint, stay completely off-screen until opened, and use a darker frosted panel so the mobile menu floats above the navbar while shading the rest of the viewport. They now attach to document.body, so host-level backdrop-filter or overflow settings never clip the overlay.
A dedicated close button now lives inside the drawer header (with no extra heading text), so the mobile sheet only shows your links plus the clear “X” while the original toggle stays on the navbar, and the drawer slides closed using the same transform easing it uses to open.
The frosted background now renders via a pseudo-element layer, so applying backdrop-filter no longer constrains the fixed drawer/backdrop to the navbar's bounding box.

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.ts

Changelog

1.2.1 – Documents and clarifies the flexible logo slot, including how to combine image + text wrappers in React or vanilla setups.
1.2.0 – Removes the hard-coded “Menu” label from the drawer so only your navigation links and the close icon appear in the side sheet.
1.1.24 – Keeps the drawer in DOM while closing so it slides out with the same transform easing instead of disappearing instantly.
1.1.23 – Adds a built-in drawer close button with a subtle rotation animation and leaves the hamburger toggle anchored to the navbar when the menu is open.
1.1.22 – Floats the hamburger/close button above the detached drawer/backdrop by portaling it to document.body, so it never hides behind the mobile sheet.
1.1.21 – Mounts the mobile drawer/backdrop on document.body so the host’s blur/overflow can’t confine them while keeping the hamburger-to-close animation above the sheet.
1.1.20 – Applies the blur inline on the host element so the glass effect works even if the pseudo-layer is overridden.
1.1.19 – Publishes the latest CSS tweaks so the blur layer and toggle behavior stay in sync.
1.1.18 – Keeps the blur layer visible while preserving the mobile toggle’s stacking order for the side menu.
1.1.17 – Keeps the blur pseudo-layer and navbar content in sync so the glass effect shows up even after custom styling.
1.1.15 – Restores the blur layer’s stacking order so the navbar frosts underlying content by default.
1.1.14 – Ensures the mobile toggle stays fixed above the drawer/backdrop stack so it remains clickable when the menu is open.
1.1.13 – Keeps the mobile toggle button floating above the drawer so you can always close the side menu.
1.1.12 – Publishes the latest navbar tweaks so the npm package matches the current source in this repo.
1.1.11 – Forces the host element to mirror the configured blur so the navbar always frosts whatever scrolls beneath it, even when custom CSS overrides the pseudo-layer.
1.1.10 – Restores the glass blur via a pseudo-layer so the navbar still frosts content underneath while keeping fixed overlays unbounded.
1.1.9 – Moves the blur layer to a pseudo-element so fixed overlays are no longer clipped by the navbar (solving the partially visible drawer/backdrop bug).
1.1.8 – Strengthens the mobile drawer backdrop to cover the full viewport, keeps the closed drawer fully off-screen, and ensures the navbar toggle always floats above the sheet.
1.1.7 – Keeps the drawer completely off-screen until opened, darkens the backdrop/drawer tint, and raises the toggle button z-index so the close action is always accessible.
1.1.6 – Limits drawer/backdrop rendering to mobile widths, deepens the drawer tint, and keeps the overlay stacked cleanly over the navbar.
1.1.5 – Raises the navbar/drawer z-index stack and removes the clipping overflow so the mobile drawer/backdrop sit above the navbar and shadow the entire viewport.
1.1.4 – Restores reliable w-full behavior for sticky/fixed navbars and adds the fullWidth toggle so you can opt into custom widths without fighting inline styles.
1.1.3 – Removes the hard-coded width: 100% so Tailwind/custom width utilities take effect while keeping responsive shrink behavior.
1.1.2 – Applies inline glass styles so blur/background always render (even when CSS ordering changes) and no longer pins sticky/fixed navbars edge-to-edge, making width limits effective.
1.1.1 – Ensures the blur effect always samples the page background and lets the navbar shrink with its parent for full-width responsiveness.
1.1.0 – Adds the color prop/attribute and synchronizes all backdrop filters so blur values produce a consistent glass effect.

License

MIT

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

glass-aura-navbar

Highlights

Installation

Quick Start

Declarative markup + script

Props / Options

React / Next.js Usage

Using an Image Logo

Combining Logo Image + Text

Styling

Example Project Snippet

Development

Changelog

License