Command

A command palette component for fast keyboard-driven navigation and actions.

Try it now! Press Cmd + K (or Ctrl + K on Windows/Linux) to open this site's command palette.

Inline Command Menu

Use .command for an inline, always-visible command menu.

Inline Command

Command Dialog

Use .command_dialog for a modal command palette triggered by a keyboard shortcut. 

<.command_dialog id="cmd-palette">
  <.command_group heading="Navigation">
    <.command_item id="home" phx-click="navigate" phx-value-to="/">
      Home
    </.command_item>
    <.command_item id="settings" phx-click="navigate" phx-value-to="/settings">
      Settings
    </.command_item>
  </.command_group>
</.command_dialog>

<!-- Trigger with keyboard shortcut -->
<script>
  document.addEventListener('keydown', (e) => {
    if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
      e.preventDefault();
      document.getElementById('cmd-palette').showModal();
    }
  });
</script>

Search Keywords

Add the keywords prop to make items searchable by alternative terms. 

<.command_item id="settings" keywords={["preferences", "config", "options"]}>
  Settings
</.command_item>

<!-- Now searchable by "settings", "preferences", "config", or "options" -->

Groups & Separators

Organize items with .command_group and .command_separator . 

<.command id="menu">
  <.command_group heading="Actions">
    <.command_item id="new">New File</.command_item>
    <.command_item id="open">Open File</.command_item>
  </.command_group>
  
  <.command_separator />
  
  <.command_group heading="Help">
    <.command_item id="docs">Documentation</.command_item>
    <.command_item id="support">Support</.command_item>
  </.command_group>
</.command>

JS Helpers

Use the show_command_dialog/1 and hide_command_dialog/1 functions to control the dialog programmatically. 

# Show the command dialog
<button phx-click={SutraUI.Command.show_command_dialog("cmd-palette")}>
  Open Command Palette
</button>

# Hide the command dialog
<button phx-click={SutraUI.Command.hide_command_dialog("cmd-palette")}>
  Close
</button>