DropdownMenu

A menu opened from a button, with checkbox, radio and submenu items.

An action menu opened from a button — the per-row “…” menu, or a table’s column-visibility toggle.

export const client = "only";

import { useState } from "react";
import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuLabel,
  DropdownMenuItem,
  DropdownMenuCheckboxItem,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  Button,
} from "@squadbase/vantage/ui";
import { MoreHorizontal } from "lucide-react";

export default function Example() {
  const [showArchived, setShowArchived] = useState(false);
  return (
    <DropdownMenu>
      <DropdownMenuTrigger
        render={<Button variant="outline" size="icon" aria-label="操作" />}
      >
        <MoreHorizontal />
      </DropdownMenuTrigger>
      <DropdownMenuContent align="start">
        <DropdownMenuLabel>操作</DropdownMenuLabel>
        <DropdownMenuItem>
          CSV をダウンロード
          <DropdownMenuShortcut>⌘E</DropdownMenuShortcut>
        </DropdownMenuItem>
        <DropdownMenuCheckboxItem
          checked={showArchived}
          onCheckedChange={setShowArchived}
        >
          アーカイブ済みを表示
        </DropdownMenuCheckboxItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem variant="destructive">削除</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuLabel,
  DropdownMenuItem,
  DropdownMenuCheckboxItem,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuSub,
  DropdownMenuSubTrigger,
  DropdownMenuSubContent,
  DropdownMenuPortal,
} from "@squadbase/vantage/ui";

The props you’ll use

Prop	Goes on	Meaning
`align` / `side` / `sideOffset`	`DropdownMenuContent`	Where it opens
`variant="destructive"`	`DropdownMenuItem`	Destructive colouring
`inset`	`Item` / `Label` / `SubTrigger`	Indent past the icon column
`checked` / `onCheckedChange`	`DropdownMenuCheckboxItem`	Checked state
`value` / `onValueChange`	`DropdownMenuRadioGroup`	Single choice

Submenus

<DropdownMenuSub>
  <DropdownMenuSubTrigger>Export</DropdownMenuSubTrigger>
  <DropdownMenuSubContent>
    <DropdownMenuItem>CSV</DropdownMenuItem>
    <DropdownMenuItem>JSON</DropdownMenuItem>
  </DropdownMenuSubContent>
</DropdownMenuSub>