A pill-shaped application menubar with frosted-glass dropdown menus, built on Radix Menubar for keyboard-accessible File/Edit/View style navigation.
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>
);
}