"use client";

import { Button } from "@smartacteam/ambient-web/button";
import { Menu } from "@smartacteam/ambient-web/menu";

export function MenuDemo() {
  return (
    <Menu.Root>
      <Menu.Trigger render={<Button>Open</Button>} />
      <Menu.Content className="w-56" align="start">
        <Menu.Group>
          <Menu.Item>
            Profile
            <Menu.Shortcut>⇧⌘P</Menu.Shortcut>
          </Menu.Item>
          <Menu.Item>
            Billing
            <Menu.Shortcut>⌘B</Menu.Shortcut>
          </Menu.Item>
          <Menu.Item>
            Settings
            <Menu.Shortcut>⌘S</Menu.Shortcut>
          </Menu.Item>
          <Menu.Item>
            Keyboard shortcuts
            <Menu.Shortcut>⌘K</Menu.Shortcut>
          </Menu.Item>
        </Menu.Group>
        <Menu.Separator />
        <Menu.Group>
          <Menu.Item>Team</Menu.Item>
          <Menu.SubmenuRoot>
            <Menu.SubTrigger>Invite users</Menu.SubTrigger>
            <Menu.Content>
              <Menu.Item>Email</Menu.Item>
              <Menu.Item>Message</Menu.Item>
              <Menu.Separator />
              <Menu.Item>More...</Menu.Item>
            </Menu.Content>
          </Menu.SubmenuRoot>
          <Menu.Item>
            New Team
            <Menu.Shortcut>⌘+T</Menu.Shortcut>
          </Menu.Item>
        </Menu.Group>
        <Menu.Separator />
        <Menu.Item>GitHub</Menu.Item>
        <Menu.Item>Support</Menu.Item>
        <Menu.Item disabled>API</Menu.Item>
        <Menu.Separator />
        <Menu.Item>
          Log out
          <Menu.Shortcut>⇧⌘Q</Menu.Shortcut>
        </Menu.Item>
      </Menu.Content>
    </Menu.Root>
  );
}

Usage

import { Menu } from "@smartacteam/ambient-web/menu";

<Menu.Root>
  <Menu.Trigger>
    <Button>Open</Button>
  </Menu.Trigger>
  <Menu.Content>
    <Menu.Item>Profile</Menu.Item>
    <Menu.Item>Billing</Menu.Item>
    <Menu.Separator />
    <Menu.Item>Team</Menu.Item>
    <Menu.Item>Subscription</Menu.Item>
  </Menu.Content>
</Menu.Root>

Examples

Checkboxes

"use client";

import React from "react";

import { Button } from "@smartacteam/ambient-web/button";
import { Menu } from "@smartacteam/ambient-web/menu";

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

  return (
    <Menu.Root>
      <Menu.Trigger render={<Button>Open</Button>} />
      <Menu.Content className="w-56">
        <Menu.Group>
          <Menu.GroupLabel>Appearance</Menu.GroupLabel>
          <Menu.Separator />
          <Menu.CheckboxItem
            checked={showStatusBar}
            onCheckedChange={setShowStatusBar}
          >
            Status Bar
          </Menu.CheckboxItem>
          <Menu.CheckboxItem
            checked={showActivityBar}
            onCheckedChange={setShowActivityBar}
            disabled
          >
            Activity Bar
          </Menu.CheckboxItem>
          <Menu.CheckboxItem checked={showPanel} onCheckedChange={setShowPanel}>
            Panel
          </Menu.CheckboxItem>
        </Menu.Group>
      </Menu.Content>
    </Menu.Root>
  );
}

Radio Group

"use client";

import React from "react";

import { Button } from "@smartacteam/ambient-web/button";
import { Menu } from "@smartacteam/ambient-web/menu";

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

  return (
    <Menu.Root>
      <Menu.Trigger render={<Button>Open</Button>} />
      <Menu.Content className="w-56">
        <Menu.Group>
          <Menu.GroupLabel>Panel Position</Menu.GroupLabel>
          <Menu.Separator />
          <Menu.RadioGroup value={position} onValueChange={setPosition}>
            <Menu.RadioItem value="top">Top</Menu.RadioItem>
            <Menu.RadioItem value="bottom">Bottom</Menu.RadioItem>
            <Menu.RadioItem value="right">Right</Menu.RadioItem>
          </Menu.RadioGroup>
        </Menu.Group>
      </Menu.Content>
    </Menu.Root>
  );
}

Nested Submenus

"use client";

import { Button } from "@smartacteam/ambient-web/button";
import { CentralIcon } from "@smartacteam/ambient-web/icon";
import { Menu } from "@smartacteam/ambient-web/menu";

export function MenuDemo() {
  return (
    <Menu.Root>
      <Menu.Trigger
        render={
          <Button size="sm">
            Navigate
            <CentralIcon
              name="IconChevronDownMedium"
              radius="2"
              stroke="1.5"
              fill="outlined"
              aria-hidden="true"
            />
          </Button>
        }
      />
      <Menu.Content align="start">
        <Menu.Item>Home</Menu.Item>
        <Menu.SubmenuRoot>
          <Menu.SubTrigger>Products</Menu.SubTrigger>
          <Menu.Content align="start" side="inline-end">
            <Menu.Item>All products</Menu.Item>
            <Menu.SubmenuRoot>
              <Menu.SubTrigger>Categories</Menu.SubTrigger>
              <Menu.Content>
                <Menu.Item>Electronics</Menu.Item>
                <Menu.Item>Clothing</Menu.Item>
                <Menu.Item>Home & Garden</Menu.Item>
              </Menu.Content>
            </Menu.SubmenuRoot>
            <Menu.Item>Featured</Menu.Item>
          </Menu.Content>
        </Menu.SubmenuRoot>
        <Menu.SubmenuRoot>
          <Menu.SubTrigger>Account</Menu.SubTrigger>
          <Menu.Content>
            <Menu.Item>Profile</Menu.Item>
            <Menu.Item>Orders</Menu.Item>
            <Menu.Item>Settings</Menu.Item>
          </Menu.Content>
        </Menu.SubmenuRoot>
      </Menu.Content>
    </Menu.Root>
  );
}