Signature / Organism

Glass Navbar

Translucent navigation bar that responds to scroll with blur intensity.

Edit on GitHub

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

Q3 revenue is up 12 percent

Finance, 2 hours ago

Checkout latency back under 300 ms

Platform, yesterday

Three teams adopted the new onboarding flow

Product, Monday

Security review passed for the billing service

Security, last week

Installation$

Install from

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

Prefer the package?

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.

Examples$

Variants$

GlassNavbar is glass by default, with readable opacity floors (84 percent surface at rest, 92 percent once scrolled) so it stays legible on any backdrop. It also accepts the shared vocabulary for a crisp bar. Glass looks frosted only when content scrolls underneath it: pick a colourful or photographic backdrop in the stage header.

import { GlassNavbar } from "@glinui/ui"


const variants = ["glinr", "plain", "solid", "soft", "outline", "ghost", "gradient", "glass"] as const


export function GlassNavbarVariantsDemo() {
return (
  <div className="flex flex-col gap-3">
    {variants.map((variant) => (
      <GlassNavbar key={variant} variant={variant} disableScrollTracking className="rounded-xl px-4">
        <div className="flex h-12 items-center justify-between">
          <span className="text-sm font-semibold">{variant}</span>
          <span className="text-xs text-[var(--color-muted)]">Docs  Components  Changelog</span>
        </div>
      </GlassNavbar>
    ))}
  </div>
)
}

Size Variants$

import { GlassNavbar } from "@glinui/ui"


export function GlassNavbarSizesDemo() {
return (
  <div className="flex flex-col gap-4">
    <GlassNavbar size="sm" disableScrollTracking className="rounded-xl px-4">
      <div className="flex items-center justify-between">
        <span className="font-semibold text-sm">Small</span>
      </div>
    </GlassNavbar>
    <GlassNavbar size="md" disableScrollTracking className="rounded-xl px-4">
      <div className="flex items-center justify-between">
        <span className="font-semibold text-sm">Medium (default)</span>
      </div>
    </GlassNavbar>
    <GlassNavbar size="lg" disableScrollTracking className="rounded-xl px-4">
      <div className="flex items-center justify-between">
        <span className="font-semibold text-sm">Large</span>
      </div>
    </GlassNavbar>
  </div>
)
}

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.

import { GlassNavbar } from "@glinui/ui"


export function GlassNavbarScrolledDemo() {
return (
  <GlassNavbar elevation="scrolled" disableScrollTracking aria-label="Main navigation" className="rounded-xl px-6">
    <div className="flex h-14 items-center justify-between">
      <span className="font-semibold">Glin UI</span>
      <span className="text-sm text-neutral-600 dark:text-neutral-300">Scrolled elevation (forced)</span>
    </div>
  </GlassNavbar>
)
}

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.
`variant`	`PanelVariantProp`	No	`-`	Surface look. The navbar is glass by default (its identity, with readable opacity floors so it stays legible on any backdrop). Pass `glinr`, `plain`, `solid`, `soft`, `outline`, `ghost` or `gradient` for a crisp bar. Glass needs content scrolling underneath to look frosted.

Source$

import { 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-10-08T01:41:21.546Z · 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.
`variant`	`PanelVariantProp`	No	`-`	Surface look. The navbar is glass by default (its identity, with readable opacity floors so it stays legible on any backdrop). Pass `glinr`, `plain`, `solid`, `soft`, `outline`, `ghost` or `gradient` for a crisp bar. Glass needs content scrolling underneath to look frosted.