tarve
Docs GitHub

DropdownMenu

A menu of actions opened from a trigger.

DropdownMenuProps packages/core/src/popups.ts:305 ↗

Import

import { DropdownMenu } from "@tarve/core";

Usage

DropdownMenu.tsx
import { Button, DropdownMenu } from "@tarve/core";

let open = false;

<DropdownMenu
  id="file-actions"
  open={open}
  trigger={<Button variant="outline">Actions</Button>}
  items={[
    { value: "rename", label: "Rename", shortcut: "F2" },
    { value: "duplicate", label: "Duplicate" },
    { value: "delete", label: "Delete", icon: "trash-2" },
  ]}
  onOpenChange={(next) => {
    open = next;
  }}
  onSelect={(value) => console.log(value)}
/>

Props

PropTypeDefault
id required string—
items required readonly DropdownMenuItem[]—
open required boolean—
trigger required Child—
contentStyle Style—
disabled booleanfalse
label string—
onOpenChange (open: boolean) => void—
onSelect (value: string) => void—
side PopupSide"bottom"
triggerStyle Style—

Common props

Shared by every component. See descriptions →

childrenhighlightkeymotionFromonHighlightonPasteonTransitionEndrovingGroupstyle

Types

DropdownMenuItem
interface DropdownMenuItem {
  value: string;
  label: string;
  icon?: IconName;
  shortcut?: string;
  disabled?: boolean;
  checked?: boolean;
}
PopupSide
type PopupSide = "top" | "right" | "bottom" | "left";