Glass Menubar

Navigation

About

A pill-shaped application menubar with frosted-glass dropdown menus, built on Radix Menubar for keyboard-accessible File/Edit/View style navigation.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Glass Menubar to your project and fits it to your theme.

Code

How Glass Menubar is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import {
  GlassMenubar,
  GlassMenubarMenu,
  GlassMenubarTrigger,
  GlassMenubarContent,
  GlassMenubarItem,
  GlassMenubarSeparator,
  GlassMenubarShortcut,
} from "@/components/ui/glass-menubar";

export default function GlassMenubarDemo() {
  return (
    <div className="flex min-h-[280px] w-full items-center justify-center bg-background p-10">
      <GlassMenubar>
        <GlassMenubarMenu>
          <GlassMenubarTrigger>File</GlassMenubarTrigger>
          <GlassMenubarContent>
            <GlassMenubarItem>
              New Tab <GlassMenubarShortcut>⌘T</GlassMenubarShortcut>
            </GlassMenubarItem>
            <GlassMenubarItem>
              New Window <GlassMenubarShortcut>⌘N</GlassMenubarShortcut>
            </GlassMenubarItem>
            <GlassMenubarSeparator />
            <GlassMenubarItem>
              Print... <GlassMenubarShortcut>⌘P</GlassMenubarShortcut>
            </GlassMenubarItem>
          </GlassMenubarContent>
        </GlassMenubarMenu>
        <GlassMenubarMenu>
          <GlassMenubarTrigger>Edit</GlassMenubarTrigger>
          <GlassMenubarContent>
            <GlassMenubarItem>
              Undo <GlassMenubarShortcut>⌘Z</GlassMenubarShortcut>
            </GlassMenubarItem>
            <GlassMenubarItem>
              Redo <GlassMenubarShortcut>⇧⌘Z</GlassMenubarShortcut>
            </GlassMenubarItem>
            <GlassMenubarSeparator />
            <GlassMenubarItem>Cut</GlassMenubarItem>
            <GlassMenubarItem>Copy</GlassMenubarItem>
            <GlassMenubarItem>Paste</GlassMenubarItem>
          </GlassMenubarContent>
        </GlassMenubarMenu>
        <GlassMenubarMenu>
          <GlassMenubarTrigger>View</GlassMenubarTrigger>
          <GlassMenubarContent>
            <GlassMenubarItem>Reload</GlassMenubarItem>
            <GlassMenubarItem>Toggle Fullscreen</GlassMenubarItem>
            <GlassMenubarSeparator />
            <GlassMenubarItem>Hide Sidebar</GlassMenubarItem>
          </GlassMenubarContent>
        </GlassMenubarMenu>
      </GlassMenubar>
    </div>
  );
}