basecoat/docs/_includes/components/dropdown-menu.njk

{% macro dropdown_menu(
  id=None,
  trigger=None,
  main_attrs={},
  trigger_attrs={},
  content_attrs={},
  include_html=true,
  include_script=false,
  register_on=["alpine:init"]
) %}
{% if include_script %}
  {% include "components/dropdown-menu-script.njk" %}
{% endif %}

{% if include_html %}
<div
  class="popover {{ main_attrs.class }}"
  x-data="dropdownMenu"
  @click.away="open = false"
  {% if id %}id="{{ id }}"{% endif %}
  {% for key, value in main_attrs %}
    {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
  {% endfor %}
>
  {% if trigger %}
  <button
    type="button"
    aria-haspopup="menu"
    aria-expanded="false"
    x-bind="$trigger"
    {% if id %}
    id="{{ id }}-trigger"
    aria-controls="{{ id }}-menu"
    {% endif %}
    {% for key, value in trigger_attrs %}
      {{ key }}="{{ value }}"
    {% endfor %}
  >
    {{ trigger | safe }}
  </button>
  {% endif %}
  <div
    data-popover
    aria-hidden="true"
    x-bind="$content"
    {% if id %}id="{{ id }}-menu"{% endif %}
    {% for key, value in content_attrs %}
      {{ key }}="{{ value }}"
    {% endfor %}
  >
    <nav role="menu">
      {% if caller %}{{ caller() }}{% endif %}
    </nav>
  </div>
</div>
{% endif %}
{% endmacro %}