Menu · API

Open and close imperatively: LiveView bindings, DOM events, or server push.

Open / close (Client Binding)

    <div class="layout__row">
  <.action phx-click={Corex.Menu.set_open("menu-api", true)} class="button button--sm">Open</.action>
  <.action phx-click={Corex.Menu.set_open("menu-api", false)} class="button button--sm">Close</.action>
</div>

<.menu
  id="menu-api"
  class="menu"
  items={[
    %Corex.Tree.Item{value: "menu", label: "Menu"},
    %Corex.Tree.Item{value: "combobox", label: "Combobox"},
    %Corex.Tree.Item{value: "select", label: "Select"}
  ]}
>
  <:trigger>Corex</:trigger>
  <:indicator><.heroicon name="hero-chevron-down" /></:indicator>
</.menu>

Open / close (client JS)

    <div class="layout__row">
  <button type="button" data-menu-api-open class="button button--sm">Open</button>
  <button type="button" data-menu-api-close class="button button--sm">Close</button>
</div>

<.menu
  id="menu-api-js"
  class="menu"
  items={[
    %Corex.Tree.Item{value: "menu", label: "Menu"},
    %Corex.Tree.Item{value: "combobox", label: "Combobox"},
    %Corex.Tree.Item{value: "select", label: "Select"}
  ]}
>
  <:trigger>Corex</:trigger>
  <:indicator><.heroicon name="hero-chevron-down" /></:indicator>
</.menu>

    const root = document.getElementById("menu:menu-api-js");
document.querySelector("[data-menu-api-open]")?.addEventListener("click", () => {
  root?.dispatchEvent(new CustomEvent("corex:menu:set-open", { bubbles: false, detail: { open: true } }));
});
document.querySelector("[data-menu-api-close]")?.addEventListener("click", () => {
  root?.dispatchEvent(new CustomEvent("corex:menu:set-open", { bubbles: false, detail: { open: false } }));
});

    const root: HTMLElement | null = document.getElementById("menu:menu-api-js");
document.querySelector("[data-menu-api-open]")?.addEventListener("click", () => {
  root?.dispatchEvent(
    new CustomEvent<{ open: boolean }>("corex:menu:set-open", { bubbles: false, detail: { open: true } })
  );
});
document.querySelector("[data-menu-api-close]")?.addEventListener("click", () => {
  root?.dispatchEvent(
    new CustomEvent<{ open: boolean }>("corex:menu:set-open", { bubbles: false, detail: { open: false } })
  );
});

Open / close (server)

    <div class="layout__row">
  <.action phx-click="menu_api_server_open" class="button button--sm">Open</.action>
  <.action phx-click="menu_api_server_close" class="button button--sm">Close</.action>
</div>

<.menu
  id="menu-api-server"
  class="menu"
  items={[
    %Corex.Tree.Item{value: "menu", label: "Menu"},
    %Corex.Tree.Item{value: "combobox", label: "Combobox"},
    %Corex.Tree.Item{value: "select", label: "Select"}
  ]}
>
  <:trigger>Corex</:trigger>
  <:indicator><.heroicon name="hero-chevron-down" /></:indicator>
</.menu>

    def handle_event("menu_api_server_open", _, socket) do
  {:noreply, Corex.Menu.set_open(socket, "menu-api-server", true)}
end

def handle_event("menu_api_server_close", _, socket) do
  {:noreply, Corex.Menu.set_open(socket, "menu-api-server", false)}
end