A right-click context menu with a frosted-glass backdrop, supporting nested submenus, checkbox items, and radio groups, built on Radix ContextMenu.
import * as React from "react";
import {
GlassContextMenu,
GlassContextMenuTrigger,
GlassContextMenuContent,
GlassContextMenuItem,
GlassContextMenuCheckboxItem,
GlassContextMenuRadioGroup,
GlassContextMenuRadioItem,
GlassContextMenuLabel,
GlassContextMenuSeparator,
GlassContextMenuShortcut,
} from "@/components/ui/glass-context-menu";
export default function GlassContextMenuDemo() {
const [showBookmarks, setShowBookmarks] = React.useState(true);
const [person, setPerson] = React.useState("pedro");
return (
<div className="flex h-screen w-full items-center justify-center bg-[var(--background)] text-[var(--foreground)]">
<GlassContextMenu>
<GlassContextMenuTrigger className="flex h-48 w-72 items-center justify-center rounded-2xl border border-dashed border-[var(--border)] text-sm text-[var(--muted-foreground)]">
Right click here
</GlassContextMenuTrigger>
<GlassContextMenuContent className="w-56">
<GlassContextMenuItem>
Back
<GlassContextMenuShortcut>⌘[</GlassContextMenuShortcut>
</GlassContextMenuItem>
<GlassContextMenuItem disabled>
Forward
<GlassContextMenuShortcut>⌘]</GlassContextMenuShortcut>
</GlassContextMenuItem>
<GlassContextMenuItem>
Reload
<GlassContextMenuShortcut>⌘R</GlassContextMenuShortcut>
</GlassContextMenuItem>
<GlassContextMenuSeparator />
<GlassContextMenuCheckboxItem
checked={showBookmarks}
onCheckedChange={setShowBookmarks}
>
Show Bookmarks
</GlassContextMenuCheckboxItem>
<GlassContextMenuSeparator />
<GlassContextMenuLabel>People</GlassContextMenuLabel>
<GlassContextMenuRadioGroup value={person} onValueChange={setPerson}>
<GlassContextMenuRadioItem value="pedro">
Pedro Duarte
</GlassContextMenuRadioItem>
<GlassContextMenuRadioItem value="colm">
Colm Tuite
</GlassContextMenuRadioItem>
</GlassContextMenuRadioGroup>
</GlassContextMenuContent>
</GlassContextMenu>
</div>
);
}