Menu

"use client";

import { Button } from "@/components/ui/button";
import {
  Menu,
  MenuPopup,
  MenuItem,
  MenuTrigger,
} from "@/components/ui/menu";

export default function MenuDemo() {
  return (
    <Menu>
      <MenuTrigger render={<Button variant="outline" />}>Open</MenuTrigger>
      <MenuPopup>
        <MenuItem>Profile</MenuItem>
        <MenuItem>Settings</MenuItem>
        <MenuItem>Billing</MenuItem>
      </MenuPopup>
    </Menu>
  );
}

"use client";

import { Button } from "@/components/ui/button";
import {
  Menu,
  MenuPopup,
  MenuItem,
  MenuSub,
  MenuSubPopup,
  MenuSubTrigger,
  MenuTrigger,
} from "@/components/ui/menu";

export default function MenuSubmenu() {
  return (
    <Menu>
      <MenuTrigger render={<Button variant="outline" />}>Edit</MenuTrigger>
      <MenuPopup>
        <MenuItem>Undo</MenuItem>
        <MenuItem>Redo</MenuItem>
        <MenuSub>
          <MenuSubTrigger>Find</MenuSubTrigger>
          <MenuSubPopup>
            <MenuItem>Search the Web</MenuItem>
            <MenuItem>Find Next</MenuItem>
            <MenuItem>Find Previous</MenuItem>
          </MenuSubPopup>
        </MenuSub>
      </MenuPopup>
    </Menu>
  );
}

"use client";

import { Button } from "@/components/ui/button";
import {
  Menu,
  MenuPopup,
  MenuItem,
  MenuShortcut,
  MenuTrigger,
} from "@/components/ui/menu";

export default function MenuShortcut_() {
  return (
    <Menu>
      <MenuTrigger render={<Button variant="outline" />}>Open</MenuTrigger>
      <MenuPopup>
        <MenuItem>
          New Tab
          <MenuShortcut>⌘T</MenuShortcut>
        </MenuItem>
        <MenuItem>
          New Window
          <MenuShortcut>⌘N</MenuShortcut>
        </MenuItem>
        <MenuItem>
          Close Tab
          <MenuShortcut>⌘W</MenuShortcut>
        </MenuItem>
      </MenuPopup>
    </Menu>
  );
}

"use client";

import { Button } from "@/components/ui/button";
import {
  Menu,
  MenuPopup,
  MenuItem,
  MenuTrigger,
} from "@/components/ui/menu";
import { UserIcon, CreditCardIcon, SettingsIcon } from "lucide-react";

export default function MenuIcon() {
  return (
    <Menu>
      <MenuTrigger render={<Button variant="outline" />}>Open</MenuTrigger>
      <MenuPopup>
        <MenuItem>
          <UserIcon />
          Profile
        </MenuItem>
        <MenuItem>
          <CreditCardIcon />
          Billing
        </MenuItem>
        <MenuItem>
          <SettingsIcon />
          Settings
        </MenuItem>
      </MenuPopup>
    </Menu>
  );
}

"use client";

import * as React from "react";
import { Button } from "@/components/ui/button";
import {
  Menu,
  MenuCheckboxItem,
  MenuPopup,
  MenuTrigger,
} from "@/components/ui/menu";

export default function MenuCheckbox() {
  const [showStatusBar, setShowStatusBar] = React.useState(true);
  const [showActivityBar, setShowActivityBar] = React.useState(false);
  const [showPanel, setShowPanel] = React.useState(false);

  return (
    <Menu>
      <MenuTrigger render={<Button variant="outline" />}>
        View
      </MenuTrigger>
      <MenuPopup>
        <MenuCheckboxItem
          checked={showStatusBar}
          onCheckedChange={setShowStatusBar}
        >
          Status Bar
        </MenuCheckboxItem>
        <MenuCheckboxItem
          checked={showActivityBar}
          onCheckedChange={setShowActivityBar}
        >
          Activity Bar
        </MenuCheckboxItem>
        <MenuCheckboxItem
          checked={showPanel}
          onCheckedChange={setShowPanel}
        >
          Panel
        </MenuCheckboxItem>
      </MenuPopup>
    </Menu>
  );
}

"use client";

import * as React from "react";
import { Button } from "@/components/ui/button";
import {
  Menu,
  MenuPopup,
  MenuRadioGroup,
  MenuRadioItem,
  MenuTrigger,
} from "@/components/ui/menu";

export default function MenuRadio() {
  const [position, setPosition] = React.useState("bottom");

  return (
    <Menu>
      <MenuTrigger render={<Button variant="outline" />}>
        Panel Position
      </MenuTrigger>
      <MenuPopup>
        <MenuRadioGroup value={position} onValueChange={setPosition}>
          <MenuRadioItem value="top">Top</MenuRadioItem>
          <MenuRadioItem value="bottom">Bottom</MenuRadioItem>
          <MenuRadioItem value="right">Right</MenuRadioItem>
        </MenuRadioGroup>
      </MenuPopup>
    </Menu>
  );
}

"use client";

import { Button } from "@/components/ui/button";
import {
  Menu,
  MenuPopup,
  MenuItem,
  MenuSeparator,
  MenuTrigger,
} from "@/components/ui/menu";

export default function MenuDestructive() {
  return (
    <Menu>
      <MenuTrigger render={<Button variant="outline" />}>Open</MenuTrigger>
      <MenuPopup>
        <MenuItem>Rename</MenuItem>
        <MenuItem>Duplicate</MenuItem>
        <MenuSeparator />
        <MenuItem variant="destructive">Delete</MenuItem>
      </MenuPopup>
    </Menu>
  );
}

"use client";

import { Button } from "@/components/ui/button";
import {
  Menu,
  MenuPopup,
  MenuGroup,
  MenuItem,
  MenuLabel,
  MenuSeparator,
  MenuTrigger,
} from "@/components/ui/menu";

export default function MenuGroups() {
  return (
    <Menu>
      <MenuTrigger render={<Button variant="outline" />}>My Account</MenuTrigger>
      <MenuPopup>
        <MenuGroup>
          <MenuLabel>Personal</MenuLabel>
          <MenuItem>Profile</MenuItem>
          <MenuItem>Settings</MenuItem>
        </MenuGroup>
        <MenuSeparator />
        <MenuGroup>
          <MenuLabel>Team</MenuLabel>
          <MenuItem>Members</MenuItem>
          <MenuItem>Billing</MenuItem>
        </MenuGroup>
      </MenuPopup>
    </Menu>
  );
}