Dropdown Menu

A menu that displays a list of actions or options triggered by a button, supporting keyboard navigation, submenus, and separators.

Preview

Usage

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

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button variant="outline">Options</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent className="w-56">
    <DropdownMenuLabel>My Account</DropdownMenuLabel>
    <DropdownMenuSeparator />
    <DropdownMenuGroup>
      <DropdownMenuItem>
        Profile
        <DropdownMenuShortcut>Ctrl+P</DropdownMenuShortcut>
      </DropdownMenuItem>
      <DropdownMenuItem>
        Settings
        <DropdownMenuShortcut>Ctrl+S</DropdownMenuShortcut>
      </DropdownMenuItem>
    </DropdownMenuGroup>
    <DropdownMenuSeparator />
    <DropdownMenuItem className="text-red-600">
      Log out
    </DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Props

open
Type: boolean
Default: —

Controlled open state of the dropdown menu

onOpenChange
Type: (open: boolean) => void
Default: —

Callback when the open state changes

side
Type: "top" | "right" | "bottom" | "left"
Default: "bottom"

The preferred side of the trigger to render against

align
Type: "start" | "center" | "end"
Default: "start"

The preferred alignment against the trigger

sideOffset
Type: number
Default: 4

Distance in pixels from the trigger
Previous Alert Dialog Next Context Menu