{% extends "layouts/minimal.html" %}
{% block title %}{_ "Dropdown" _}{% endblock %}
{% block content %}

{% include "dropdown-js.html" :class ".dropdown" %}

<div class="section">
  <div class="columns is-centered">
    <div class="column is-half">
      <div class="container">
        <div class="dropdown is-hoverable">
          <div class="dropdown-trigger">
            <input class="input" type="text" placeholder="Testing..."  aria-haspopup="true" aria-controls="dropdown-menu2">
          </div>
          <div class="dropdown-menu" id="dropdown-menu2" role="menu">
            <div class="dropdown-content">
              <div class="dropdown-item">
                <p>You can insert <strong>any type of content</strong> within the dropdown menu.</p>
              </div>
              <hr class="dropdown-divider">
              <div class="dropdown-item">
                <p>You simply need to use a <code>&lt;div&gt;</code> instead.</p>
              </div>
              <hr class="dropdown-divider">
              <a href="#" class="dropdown-item">
                This is a link
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

{% endblock %}