Menus and dialogs

Menu and dialog components - action_menu, dropdown, select_menu, drawer, dialog - share common interaction and appearance.

To use these components, CSS and JavaScript hook must be installed - see Installation.


Menus are created with 3 elements: the component wrapper, a toggle button and the menu contents. For example for a dropdown menu:

With dialogs and drawers, the toggle element is omitted - they are usually opened from the outside.


The menu toggle is an HTML label element that is connected to the checkbox that holds the state; clicking will toggle the checkbox state.

To control the open state from the outside, use the Prompt hook with either of these functions:

  • Prompt.hide(selectorOrElement)
  • Prompt.toggle(selectorOrElement)

where selectorOrElement is either an HTML element, this (when used within the component), or a selector string.

Status callbacks

Use attr prompt_options to pass JavaScript state callback functions.


Prompt CSS mainly defines behavior and can be modified by providing different values to the default CSS Variables:

App header

Take note of the z-index values: if the application uses a fixed header, you may want to ensure that its z-index is below dialogs/drawers and above menus, so between 101 and 199.

Maintaining state in forms

Under the hood, menu behavior is implemented through the Prompt hook that retrieves the open state and other relevant attributes from a hidden toggle checkbox. By using a checkbox, we are able to preserve the open state when they are used within a form and updated by user actions.

Normally after an update to the LiveView state, the menu/dialog/drawer is redrawn, resulting in it being rendered closed.

To preserve the open state of the menu, you can pass the form along with a fictitious and unique field name (not used in the data model). This field name is then used in event handlers.

Here we are adding field status_toggle to the form:

The same method can be used for dialogs and drawers:

Menu behavior: when to update

The implementation of menu behavior from a user's perspective is determined by the event handler, where you have two options for updating the model state:

  1. Update the model state after each selection.
  2. Update the model state after closing the menu.

Approach 1: Update with each selection

This approach is usually preferred, because it allows for direct validation feedback.

Process the event as usual and re-insert the fictitious field value:

Approach 2: Update after closing the menu

Ignore the event while the the menu is open (the toggle checkbox value is "true"):