DropdownMenu

import { DropdownMenu } from "~/components/ui/base/dropdown-menu";

<DropdownMenu.Root gutter={4}>
  <DropdownMenu.Trigger>Open menu</DropdownMenu.Trigger>
  <DropdownMenu.Popover>
    <DropdownMenu.Item>Profile</DropdownMenu.Item>
    <DropdownMenu.Item>Settings</DropdownMenu.Item>
    <DropdownMenu.Separator />
    <DropdownMenu.Item>Remove</DropdownMenu.Item>
  </DropdownMenu.Popover>
</DropdownMenu.Root>

import { DropdownMenu } from "~/components/ui/base/dropdown-menu";

<DropdownMenu.Root gutter={4}>
  <DropdownMenu.Trigger>Account</DropdownMenu.Trigger>
  <DropdownMenu.Popover>
    <DropdownMenu.Group>
      <DropdownMenu.Label>My account</DropdownMenu.Label>
      <DropdownMenu.Item>Profile</DropdownMenu.Item>
      <DropdownMenu.Item>Billing</DropdownMenu.Item>
    </DropdownMenu.Group>
    <DropdownMenu.Separator />
    <DropdownMenu.Group>
      <DropdownMenu.Label>Danger zone</DropdownMenu.Label>
      <DropdownMenu.Item>Sign out</DropdownMenu.Item>
    </DropdownMenu.Group>
  </DropdownMenu.Popover>
</DropdownMenu.Root>

import { component$, useSignal } from "@builder.io/qwik";
import { DropdownMenu } from "~/components/ui/base/dropdown-menu";

export const MenuWithSelection = component$(() => {
  const notifications = useSignal(true);
  const theme = useSignal("system");

  return (
    <DropdownMenu.Root gutter={4}>
      <DropdownMenu.Trigger>Options</DropdownMenu.Trigger>
      <DropdownMenu.Popover>
        <DropdownMenu.CheckboxItem bind:value={notifications}>
          Notifications
        </DropdownMenu.CheckboxItem>
        <DropdownMenu.Separator />
        <DropdownMenu.RadioGroup bind:value={theme}>
          <DropdownMenu.RadioItem value="light">Light</DropdownMenu.RadioItem>
          <DropdownMenu.RadioItem value="dark">Dark</DropdownMenu.RadioItem>
          <DropdownMenu.RadioItem value="system">System</DropdownMenu.RadioItem>
        </DropdownMenu.RadioGroup>
      </DropdownMenu.Popover>
    </DropdownMenu.Root>
  );
});