An accessible dropdown menu with checkboxes, radio groups, submenus, and smooth spring-scale open/close animations for account or action menus.
"use client";
import {
DropdownMenu,
DropdownMenuCheckboxItem,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuRadioGroup,
DropdownMenuRadioItem,
DropdownMenuSeparator,
DropdownMenuShortcut,
DropdownMenuSub,
DropdownMenuSubContent,
DropdownMenuSubTrigger,
DropdownMenuTrigger,
} from "@/components/ui/base-dropdown-menu";
import { useState } from "react";
export default function DropdownMenuDemo() {
const [bookmarksChecked, setBookmarksChecked] = useState(true);
const [urlsChecked, setUrlsChecked] = useState(false);
const [person, setPerson] = useState("pedro");
return (
<div className="flex w-full max-w-md items-center justify-center p-6">
<DropdownMenu>
<DropdownMenuTrigger className="inline-flex h-10 select-none items-center gap-2 rounded-xl border border-border bg-background px-4 font-medium text-sm shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
Open Menu
</DropdownMenuTrigger>
<DropdownMenuContent className="w-60">
<DropdownMenuGroup>
<DropdownMenuLabel>My Account</DropdownMenuLabel>
<DropdownMenuItem>
Profile
<DropdownMenuShortcut>⌘P</DropdownMenuShortcut>
</DropdownMenuItem>
<DropdownMenuItem>
Billing
<DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
</DropdownMenuItem>
<DropdownMenuItem>
Settings
<DropdownMenuShortcut>⌘,</DropdownMenuShortcut>
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuSub>
<DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>
<DropdownMenuSubContent className="w-52">
<DropdownMenuItem>
Save As…
<DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
</DropdownMenuItem>
<DropdownMenuItem>Create Shortcut…</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem>
Developer Tools
<DropdownMenuShortcut>⌥⌘I</DropdownMenuShortcut>
</DropdownMenuItem>
</DropdownMenuSubContent>
</DropdownMenuSub>
<DropdownMenuSeparator />
<DropdownMenuCheckboxItem
checked={bookmarksChecked}
onCheckedChange={setBookmarksChecked}
>
Show Bookmarks Bar
<DropdownMenuShortcut>⌘⇧B</DropdownMenuShortcut>
</DropdownMenuCheckboxItem>
<DropdownMenuCheckboxItem
checked={urlsChecked}
onCheckedChange={setUrlsChecked}
>
Show Full URLs
</DropdownMenuCheckboxItem>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuLabel inset>People</DropdownMenuLabel>
<DropdownMenuRadioGroup onValueChange={setPerson} value={person}>
<DropdownMenuRadioItem inset value="pedro">
Pedro Duarte
</DropdownMenuRadioItem>
<DropdownMenuRadioItem inset value="colm">
Colm Tuite
</DropdownMenuRadioItem>
</DropdownMenuRadioGroup>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuItem variant="destructive">
Delete Account
<DropdownMenuShortcut>⌘⇧⌫</DropdownMenuShortcut>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
);
}
