Signature / Organismstable

Glass Navbar

Translucent navigation bar that responds to scroll with blur intensity.

@glinui/uiComponent: glass-navbar

Installation$

pnpm add @glinui/ui @glinui/tokens

Registry$

pnpm dlx @glinui/cli@latest add glass-navbar

Usage$

Place GlassNavbar at the top of your layout. By default it tracks page scroll and automatically transitions to the scrolled elevation state after the scroll threshold is crossed. Add aria-label to give screen readers context.

Basic$

TSX

1import { GlassNavbar } from "@glinui/ui"
2
3export function GlassNavbarDemo() {
4return (
5  <GlassNavbar aria-label="Main navigation" className="rounded-xl px-6">
6    <div className="flex h-14 items-center justify-between">
7      <span className="font-semibold">Glin UI</span>
8      <nav className="flex items-center gap-6 text-sm">
9        <a href="#" className="text-neutral-600 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-100">Docs</a>
10        <a href="#" className="text-neutral-600 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-100">Components</a>
11        <a href="#" className="text-neutral-600 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-100">Changelog</a>
12      </nav>
13    </div>
14  </GlassNavbar>
15)
16}

Examples$

Size Variants$

TSX

1import { GlassNavbar } from "@glinui/ui"
2
3export function GlassNavbarSizesDemo() {
4return (
5  <div className="flex flex-col gap-4">
6    <GlassNavbar size="sm" disableScrollTracking className="rounded-xl px-4">
7      <div className="flex items-center justify-between">
8        <span className="font-semibold text-sm">Small</span>
9      </div>
10    </GlassNavbar>
11    <GlassNavbar size="md" disableScrollTracking className="rounded-xl px-4">
12      <div className="flex items-center justify-between">
13        <span className="font-semibold text-sm">Medium (default)</span>
14      </div>
15    </GlassNavbar>
16    <GlassNavbar size="lg" disableScrollTracking className="rounded-xl px-4">
17      <div className="flex items-center justify-between">
18        <span className="font-semibold text-sm">Large</span>
19      </div>
20    </GlassNavbar>
21  </div>
22)
23}

Forced Scrolled Elevation$

Pin the navbar to the scrolled elevation state without relying on scroll position — useful for previews or layouts where the navbar is not at the top of the page.

TSX

1import { GlassNavbar } from "@glinui/ui"
2
3export function GlassNavbarScrolledDemo() {
4return (
5  <GlassNavbar elevation="scrolled" disableScrollTracking aria-label="Main navigation" className="rounded-xl px-6">
6    <div className="flex h-14 items-center justify-between">
7      <span className="font-semibold">Glin UI</span>
8      <span className="text-sm text-neutral-600 dark:text-neutral-300">Scrolled elevation (forced)</span>
9    </div>
10  </GlassNavbar>
11)
12}

Accessibility$

Renders as a semantic <nav> element — add aria-label (e.g. "Main navigation") to distinguish multiple navbars on the page.
Child links and buttons retain native keyboard navigation with no custom focus management applied.

Reduced Motion$

The blur and opacity transition between base and scrolled elevation states is disabled when prefers-reduced-motion is active.

API Reference$

Prop	Type	Required	Default	Description
`disableScrollTracking`	`boolean`	No	`false`	Auto-generated from TypeScript source.
`elevation`	`VariantProps<typeof glassNavbarVariants>["elevation"]`	No	`-`	Auto-generated from TypeScript source.
`scrollThreshold`	`number`	No	`8`	Auto-generated from TypeScript source.
`size`	`"sm" \| "md" \| "lg"`	No	`"md"`	Variant option from glassNavbarVariants.

Source$

TSX

1import { GlassNavbar } from "@glinui/ui"

packages/ui/src/components/glass-navbar.tsx

Generated API Snapshot

Beta

Auto-extracted from TypeScript source in packages/ui/src/components/glass-navbar.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.

Generated: 2026-02-19T17:59:28.468Z · Full index: /docs/api-metadata

Primary Props Type

GlassNavbarProps

`GlassNavbarProps`

Prop	Type	Required	Default	Description
`disableScrollTracking`	`boolean`	No	`false`	-
`elevation`	`VariantProps<typeof glassNavbarVariants>["elevation"]`	No	`-`	-
`scrollThreshold`	`number`	No	`8`	-
`size`	`"sm" \| "md" \| "lg"`	No	`"md"`	Variant option from glassNavbarVariants.