Displays a menu to the user — such as a set of actions or functions — triggered by a button.
import { Menu } from "@smartacteam/ambient-web/dropdown-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>"use client";
import { Button } from "@smartacteam/ambient-web/button";
import { Menu } from "@smartacteam/ambient-web/dropdown-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>
);
}"use client";
import React from "react";
import { Button } from "@smartacteam/ambient-web/button";
import { Menu } from "@smartacteam/ambient-web/dropdown-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>
);
}"use client";
import React from "react";
import { Button } from "@smartacteam/ambient-web/button";
import { Menu } from "@smartacteam/ambient-web/dropdown-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>
);
}