Components
Loading preview...
Displays a menu to the user — such as a set of actions or functions — triggered by a button.
npx shadcn@latest add https://21st.dev/r/shadcn/dropdown-menuimport { Button } from "@/components/ui/button";
import {
DropdownMenu,
DropdownMenuCheckboxItem,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuPortal,
DropdownMenuRadioGroup,
DropdownMenuRadioItem,
DropdownMenuSeparator,
DropdownMenuShortcut,
DropdownMenuSub,
DropdownMenuSubContent,
DropdownMenuSubTrigger,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { ChevronDown, Config, User, Webcam } from "@mynaui/icons-react";
function Basic() {
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline">
Praveen Juge
<ChevronDown className="-mr-1 ml-2 size-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-56">
<DropdownMenuLabel>Praveen Juge</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuItem>
<User className="mr-2 size-4" />
My Profile
</DropdownMenuItem>
<DropdownMenuItem>
<Config className="mr-2 size-4" />
<span>Personal Settings</span>
<DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuSub>
<DropdownMenuSubTrigger>
<Webcam className="mr-2 size-4" />
<span>Visibility</span>
</DropdownMenuSubTrigger>
<DropdownMenuPortal>
<DropdownMenuSubContent>
<DropdownMenuItem>
<span>Online</span>
</DropdownMenuItem>
<DropdownMenuItem>
<span>Appear Offline</span>
</DropdownMenuItem>
</DropdownMenuSubContent>
</DropdownMenuPortal>
</DropdownMenuSub>
<DropdownMenuSeparator />
<DropdownMenuLabel inset>Current Status</DropdownMenuLabel>
<DropdownMenuRadioGroup value="invisible">
<DropdownMenuRadioItem value="online">Online</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="invisible">
Invisible
</DropdownMenuRadioItem>
<DropdownMenuRadioItem disabled value="offline">
Offline
</DropdownMenuRadioItem>
</DropdownMenuRadioGroup>
<DropdownMenuSeparator />
<DropdownMenuLabel inset>My Permissions</DropdownMenuLabel>
<DropdownMenuCheckboxItem checked>Admin</DropdownMenuCheckboxItem>
<DropdownMenuCheckboxItem>Member</DropdownMenuCheckboxItem>
<DropdownMenuCheckboxItem disabled>Customer</DropdownMenuCheckboxItem>
</DropdownMenuContent>
</DropdownMenu>
);
}
export { Basic }