---
title: Anchored account menu
description: Compose an account menu with Popover's continuous tail, scroll viewport, and Base UI render prop.
order: 31
toc:
  - id: example
    title: Example
  - id: why-these-props
    title: Why these props
  - id: accessibility
    title: Accessibility
---

## Example {#example}

```tsx
import { Avatar, AvatarFallback } from "@workspace/ui/components/avatar"
import { Button } from "@workspace/ui/components/button"
import { SettingsIcon } from "@workspace/ui/components/icon"
import {
  Popover,
  PopoverContent,
  PopoverDescription,
  PopoverTitle,
  PopoverTrigger,
} from "@workspace/ui/components/popover"

export function AccountMenu() {
  return (
    <Popover>
      <PopoverTrigger
        render={
          <Button variant="ghost" size="icon" aria-label="Account menu" />
        }
      >
        <Avatar>
          <AvatarFallback>JF</AvatarFallback>
        </Avatar>
      </PopoverTrigger>

      <PopoverContent
        align="end"
        side="bottom"
        showArrow={{ cornerRadius: "2xl", tailSize: "sm" }}
        className="w-80 gap-0 p-0"
        viewportClassName="max-h-[min(28rem,var(--available-height))] p-4"
      >
        <PopoverTitle>Jaydon Frankie</PopoverTitle>
        <PopoverDescription>demo@minimals.cc</PopoverDescription>
        <Button variant="ghost" className="mt-4 w-full justify-start">
          <SettingsIcon />
          Appearance
        </Button>
      </PopoverContent>
    </Popover>
  )
}
```

## Why these props {#why-these-props}

`align="end"` aligns the logical end of the panel and trigger, adapting automatically in RTL. `showArrow` enables the local continuous tail. The outer `className` styles the whole surface while `viewportClassName` styles its scrolling region, allowing a long menu to scroll without clipping the tail.

## Accessibility {#accessibility}

Provide an `aria-label` when the trigger button contains only an icon or avatar. Use `PopoverTitle` and `PopoverDescription` in the panel, and let the Base UI Root own dismissal and focus return. If the content is semantically a set of choices or commands, use DropdownMenu or Command rather than assigning a menu role manually.