67 lines
2.2 KiB
Plaintext
67 lines
2.2 KiB
Plaintext
|
---
|
||
|
|
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.
|