Profile Dropdown with Status Dropdown Menu for Ark UI

Q: How is the online dot drawn?

An AvatarBadge with bg-success inside the trigger's Avatar, which places it at the bottom end corner. Change the class for away or busy, and say the status in text too, such as in the button's aria-label, since a color alone isn't announced.

Q: What is in the menu header?

A DropdownMenuLabel with font-normal: a size-12 avatar next to the name, shadcn, the email, m@example.com, and a secondary Badge that reads Pro. It labels the first DropdownMenuGroup and can't be focused.

Q: What if the photo fails?

AvatarFallback shows CN in both avatars, and the online dot stays on the trigger's avatar.

Q: Which commands are under the header?

View Profile, Billing and Account Settings, each after an aria-hidden icon, then a separator and Log out with variant="destructive". The menu is w-64 and lines up with the end of the button.

Q: Can I open this menu from the keyboard?

Yes. The trigger is a Button with aria-label set to Open account menu: Tab to it and press Enter, Space or Arrow Down. Escape closes the menu and returns focus to it.

A profile menu whose avatar shows an online dot, with a large avatar, the email and a Pro badge in the header.

The avatar button draws an online dot. The menu header shows a larger avatar, the name, the email, and a Pro badge, then View Profile, Billing, Account Settings, and Log out.

Use it when presence should show before the menu opens. The dot is drawn, not a live status. Confirm sign-out in an Alert Dialog. In React, Ark UI does not track presence or end the session.

PreviewCode

Installation

Free with an account. It carries your token, so the CLI installs everything in one go.

Google GitHub

Use email insteadNo credit card

Anatomy

Usage

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button
      aria-label="Open account menu"
      pill
      size="icon-lg"
      variant="ghost"
    >
      <Avatar>
        <AvatarImage alt="@shadcn" src="https://github.com/shadcn.png" />
        <AvatarFallback>CN</AvatarFallback>
        <AvatarBadge className="bg-success" />
      </Avatar>
    </Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent className="w-64">
    <DropdownMenuGroup>
      <DropdownMenuLabel className="font-normal">
        <div className="flex items-center gap-3">
          <Avatar className="size-12">
            <AvatarImage alt="@shadcn" src="https://github.com/shadcn.png" />
            <AvatarFallback>CN</AvatarFallback>
          </Avatar>
          <div className="flex flex-col gap-1">
            <p className="font-medium text-foreground text-sm leading-none">
              shadcn
            </p>
            <p className="text-muted-foreground text-xs leading-none">
              m@example.com
            </p>
            <Badge className="w-fit" variant="secondary">
{/* The rest of the file is under Installation. */}

FAQ

How is the online dot drawn?

An AvatarBadge with bg-success inside the trigger's Avatar, which places it at the bottom end corner. Change the class for away or busy, and say the status in text too, such as in the button's aria-label, since a color alone isn't announced.

What is in the menu header?

A DropdownMenuLabel with font-normal: a size-12 avatar next to the name, shadcn, the email, m@example.com, and a secondary Badge that reads Pro. It labels the first DropdownMenuGroup and can't be focused.

What if the photo fails?

AvatarFallback shows CN in both avatars, and the online dot stays on the trigger's avatar.

Which commands are under the header?

View Profile, Billing and Account Settings, each after an aria-hidden icon, then a separator and Log out with variant="destructive". The menu is w-64 and lines up with the end of the button.

How do I run Billing or Log out?

The menu closes after a choice. Navigate or sign out where your library reports it. Set onSelect on DropdownMenu. It receives details.value, such as billing.

Can I open this menu from the keyboard?

Yes. The trigger is a Button with aria-label set to Open account menu: Tab to it and press Enter, Space or Arrow Down. Escape closes the menu and returns focus to it.

API Reference

Sets asChild, value="view-profile", value="billing", value="account-settings", value="log-out" and variant="destructive". The rest is on the Dropdown Menu page.