An accessible dropdown menu for triggering a list of actions from a button, with grouped sections, checkboxes, radio options, submenus, and keyboard/typeahead navigation.
"use client";
import * as React from "react";
import {
DropdownMenu,
DropdownMenuTrigger,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuGroupLabel,
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuSub,
DropdownMenuSubTrigger,
DropdownMenuSubContent,
} from "@/components/ui/dropdown-menu";
import { Button } from "@appica/ui-react/button";
import { Avatar, AvatarImage, AvatarFallback } from "@appica/ui-react/avatar";
import { Badge } from "@appica/ui-react/badge";
import { Switch } from "@appica/ui-react/switch";
import {
UserCircle,
ShoppingBag,
Heart,
Message,
LayoutDashboard,
Settings,
BellRinging,
MoonStars,
Logout,
IdBadge2,
CreditCard,
MapPin,
} from "@appica/icons-react";
export default function DropdownMenuAccount() {
const [darkMode, setDarkMode] = React.useState(false);
return (
<DropdownMenu>
<DropdownMenuTrigger
render={
<Button>
<UserCircle data-icon="start" />
My account
</Button>
}
/>
<DropdownMenuContent className="min-w-64">
<div className="flex gap-3 px-2.5 pt-2.5 pb-1.5">
<Avatar size="sm">
<AvatarImage
src="data:image/jpeg;base64,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"
alt="Sarah Jenkins"
/>
<AvatarFallback>SJ</AvatarFallback>
</Avatar>
<div className="min-w-0 flex-1">
<p className="text-foreground-intense truncate text-sm font-semibold">
Sarah Jenkins
</p>
<p className="text-foreground-muted truncate text-xs">
sarah@appica.dev
</p>
</div>
<Badge variant="secondary" size="sm">
User
</Badge>
</div>
<DropdownMenuGroup>
<DropdownMenuGroupLabel>Personal</DropdownMenuGroupLabel>
<DropdownMenuItem>
<UserCircle data-icon="start" />
Profile
</DropdownMenuItem>
<DropdownMenuItem>
<ShoppingBag data-icon="start" />
My Orders
<Badge variant="outline" size="sm" className="ms-auto">
2
</Badge>
</DropdownMenuItem>
<DropdownMenuItem>
<Heart data-icon="start" />
Wishlist
</DropdownMenuItem>
<DropdownMenuItem>
<Message data-icon="start" />
Messages
<Badge variant="outline" size="sm" className="ms-auto">
5
</Badge>
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuGroupLabel>Management</DropdownMenuGroupLabel>
<DropdownMenuItem>
<LayoutDashboard data-icon="start" />
Dashboard
</DropdownMenuItem>
<DropdownMenuSub>
<DropdownMenuSubTrigger>
<Settings data-icon="start" />
Settings
</DropdownMenuSubTrigger>
<DropdownMenuSubContent>
<DropdownMenuItem>
<IdBadge2 data-icon="start" />
Personal Info
</DropdownMenuItem>
<DropdownMenuItem>
<CreditCard data-icon="start" />
Payments
</DropdownMenuItem>
<DropdownMenuItem>
<MapPin data-icon="start" />
Addresses
</DropdownMenuItem>
</DropdownMenuSubContent>
</DropdownMenuSub>
<DropdownMenuItem>
<BellRinging data-icon="start" />
Notifications
</DropdownMenuItem>
<DropdownMenuItem
closeOnClick={false}
onClick={() => setDarkMode((on) => !on)}
>
<MoonStars data-icon="start" />
Dark Mode
<Switch
checked={darkMode}
readOnly
tabIndex={-1}
aria-hidden
className="pointer-events-none ms-auto"
/>
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuItem>
<Logout data-icon="start" />
Log Out
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
);
}
