Zostel
Overlays Dropdown Menu

Dropdown Menu

More actions, one click away — arrow keys to move, Enter to pick.

Preview

Usage

tsx
import {
  DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuLabel,
  DropdownMenuSeparator, DropdownMenuGroup, DropdownMenuItem, Button,
} from "zostel-ui";

<DropdownMenu>
  <DropdownMenuTrigger asChild><Button variant="outline">You</Button></DropdownMenuTrigger>
  <DropdownMenuContent className="w-56">
    <DropdownMenuLabel>You</DropdownMenuLabel>
    <DropdownMenuSeparator />
    <DropdownMenuItem>My stays</DropdownMenuItem>
    <DropdownMenuItem>Passport</DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem className="text-destructive">Log out</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Parts

DropdownMenuContent
Type: { align?, sideOffset? }
Default: —

The menu; sideOffset defaults to 4.

DropdownMenuItem
Type: { onSelect?, disabled?, inset? }
Default: —

One action.

DropdownMenuCheckboxItem / RadioGroup / RadioItem
Type:
Default: —

Choices inside the menu.

DropdownMenuSub / SubTrigger / SubContent
Type:
Default: —

A menu inside the menu.

DropdownMenuLabel / Separator / Shortcut / Group
Type:
Default: —

Structure.