Anatomy

    <.menu
  class="menu"
  items={[
    %Corex.Tree.Item{
      value: "edit",
      label: "Edit"
    },
    %Corex.Tree.Item{
      value: "duplicate",
      label: "Duplicate"
    },
    %Corex.Tree.Item{
      value: "delete",
      label: "Delete"
    }
  ]}
>
  <:trigger>Actions</:trigger>
  <:indicator>
    <.heroicon name="hero-chevron-down" />
  </:indicator>
</.menu>

  

    <.menu
  class="menu"
  items={[
    %Corex.Tree.Item{
      value: "edit",
      label: "Edit",
      group: "Actions"
    },
    %Corex.Tree.Item{
      value: "duplicate",
      label: "Duplicate",
      group: "Actions"
    },
    %Corex.Tree.Item{
      value: "account-1",
      label: "Account 1",
      group: "Accounts"
    },
    %Corex.Tree.Item{
      value: "account-2",
      label: "Account 2",
      group: "Accounts"
    }
  ]}
>
  <:trigger>Actions</:trigger>
  <:indicator>
    <.heroicon name="hero-chevron-down" />
  </:indicator>
</.menu>

  

    <.menu
  class="menu"
  items={[
    %Corex.Tree.Item{value: "fra", label: "France"},
    %Corex.Tree.Item{value: "bel", label: "Belgium"},
    %Corex.Tree.Item{value: "deu", label: "Germany"}
  ]}
>
  <:item :let={item}>
    <Flagpack.flag name={String.to_existing_atom(to_string(item.value))} />
    {item.label}
  </:item>
  <:trigger>Actions</:trigger>
  <:indicator>
    <.heroicon name="hero-chevron-down" />
  </:indicator>
</.menu>

  

    <.menu
  class="menu"
  items={[
    %Corex.Tree.Item{
      value: "new-tab",
      label: "New tab"
    },
    %Corex.Tree.Item{
      value: "share",
      label: "Share",
      children: [
        %Corex.Tree.Item{
          value: "messages",
          label: "Messages"
        },
        %Corex.Tree.Item{
          value: "airdrop",
          label: "Airdrop"
        },
        %Corex.Tree.Item{
          value: "whatsapp",
          label: "WhatsApp"
        }
      ]
    },
    %Corex.Tree.Item{
      value: "print",
      label: "Print"
    }
  ]}
>
  <:trigger>Click me</:trigger>
</.menu>

  

    <.menu
  class="menu"
  items={[
    %Corex.Tree.Item{value: "tabs", label: "Tabs"},
    %Corex.Tree.Item{
      value: "corex",
      label: "Corex",
      children: [
        %Corex.Tree.Item{value: "combobox", label: "Combobox", group: "Pickers"},
        %Corex.Tree.Item{value: "date-picker", label: "Date picker", group: "Pickers"},
        %Corex.Tree.Item{value: "menu", label: "Menu", group: "Overlays"},
        %Corex.Tree.Item{value: "dialog", label: "Dialog", group: "Overlays"}
      ]
    }
  ]}
>
  <:trigger>Corex</:trigger>
  <:indicator><.heroicon name="hero-chevron-down" /></:indicator>
  <:nested_indicator><.heroicon name="hero-chevron-right" /></:nested_indicator>
</.menu>