Loading dashboard...
Loading dashboard...
import { Button } from "@/components/ui/button"
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"<DropdownMenu>
<DropdownMenuTrigger render={<Button variant="outline" />}>
Open
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuGroup>
<DropdownMenuLabel>My Account</DropdownMenuLabel>
<DropdownMenuItem>Profile</DropdownMenuItem>
<DropdownMenuItem>Billing</DropdownMenuItem>
<DropdownMenuSeparator />
</DropdownMenuGroup>
<DropdownMenuGroup>
<DropdownMenuItem>Team</DropdownMenuItem>
<DropdownMenuItem>Subscription</DropdownMenuItem>
</DropdownMenuGroup>
</DropdownMenuContent>
</DropdownMenu>A basic dropdown menu with labels and separators.
Use DropdownMenuSub to nest secondary actions.
Add DropdownMenuShortcut to show keyboard hints.
Combine icons with labels for quick scanning.
Use DropdownMenuCheckboxItem for toggles.
Add icons to checkbox items.
Use DropdownMenuRadioGroup for exclusive choices.
Show radio options with icons.
Use variant="destructive" for irreversible actions.
An account switcher dropdown triggered by an avatar.
A richer example combining groups, icons, and submenus.
See the Base UI documentation for the full API reference.
"use client"
import { Button } from "@/components/ui/button""use client"
import { Button } from "@/components/ui/button""use client"
import { Button } from "@/components/ui/button""use client"
import { Button } from "@/components/ui/button""use client"
import { Button } from "@/components/ui/button""use client"
import * as React from "react""use client"
import * as React from "react""use client"
import * as React from "react""use client"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar""use client"
import { Button } from "@/components/ui/button""use client"
import * as React from "react""use client"
import * as React from "react"