Glass Navbar

Installation

pnpm dlx shadcn@latest add @cleverui/navbar-glass

Requires the @cleverui registry in your components.json, a one-off, two-line setup.

Usage

tsx

import { NavbarGlass } from '@/components/blocks/navbar-glass'

Exampletsx

import { NavbarGlass } from '@/components/blocks/navbar-glass'

export default function NavbarGlassDemo() {
  return (
    <div className="min-h-[200vh]">
      <NavbarGlass
        brand={
          <span className="inline-flex items-baseline gap-1.5">
            Meridian
            <span className="font-mono text-[10px] uppercase tracking-[0.2em] text-muted-foreground">ops</span>
          </span>
        }
        links={[
          { label: 'Product', href: '#' },
          { label: 'Pricing', href: '#' },
          { label: 'Customers', href: '#' },
          { label: 'Changelog', href: '#' },
        ]}
        cta={{ label: 'Start free', href: '#' }}
      />
      <div className="mx-auto max-w-6xl px-6 pt-40">
        <h1 className="max-w-2xl text-4xl font-semibold tracking-tight text-balance sm:text-5xl">
          Scroll to watch the header condense into glass.
        </h1>
        <p className="mt-6 max-w-lg text-muted-foreground">
          At the top it is pure structure, no fill, no border. Twelve pixels down it gains a hairline
          seam, a blur, and a tighter height.
        </p>
        <div className="mt-24 space-y-4">
          {Array.from({ length: 12 }, (_, i) => (
            <div key={i} className="h-24 rounded-2xl border border-border/60 bg-card" />
          ))}
        </div>
      </div>
    </div>
  )
}

API reference

NavbarGlass accepts the following props.

Prop	Type	Default	Description
`brand`	`React.ReactNode`	`'CleverUI'`	brand slot, text or your own logo node
`brandHref`	`string`	`'/'`	–
`links`*	`NavbarLink[]`	–	–
`cta`	`{ label: string; href: string }`	–	–

…plus everything from React.HTMLAttributes<HTMLElement>: className, event handlers, aria attributes and the rest pass straight through.

Referenced types

Typestsx

export interface NavbarLink {
  label: string
  href: string
}

Related components

Bottom Tabs Navbar

App-style React navigation, a thumb-reach bottom tab bar with a raised primary action on mobile that becomes a top Tailwind glass bar on desktop; one landmark, safe-area aware.

Breadcrumb Morph Navbar

An app navbar that morphs between top-level links and a breadcrumb trail as a depth prop changes, the active link travels into crumb position with layoutId continuity.

Mega Panel Navbar

Navbar whose product menu opens a three-zone mega panel, primary destinations with descriptions, a quiet secondary column, and a featured card. Real IA, not a link dump.

Sidebar Hybrid Navbar

Docs-style responsive navigation, a glass top bar with a drawer on mobile becomes a left rail of grouped sections with an active keyline on lg. Skip link built in.

Tab Rail Navbar

Two-deck React navbar, primary sections over a persistent contextual sub-link rail with a sliding Tailwind underline; the mobile rail scrolls its own overflow with edge fades.

Command Center Navbar

A navbar whose centerpiece is a Cmd-K search button opening a compact command sheet, grouped destinations, arrow-key selection, quiet links flanking a keyboard-first affordance.

Frequently asked questions

How do I install the Glass Navbar component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/navbar-glass`. The shadcn CLI copies the source into your project, you own the code from that point. You can also copy the source directly from this page.

What dependencies does Glass Navbar require?

Glass Navbar uses motion and lucide-react on top of React and Tailwind CSS. You don't need to install them manually, the shadcn CLI resolves and installs npm dependencies automatically when you add the component.

Can I theme Glass Navbar to match my brand?

Yes. The component is styled entirely with Tailwind utilities over standard design tokens (primary, background, muted, border), so it inherits your existing shadcn/ui theme automatically. Change your CSS variables and the component follows, no source edits needed for palette, radius, or fonts.

Preview & code