---
layout: documentation
doc-tab: components
doc-subtab: dropdown
---

{% capture dropdown_example %}
<div class="dropdown">
  <div class="dropdown-trigger">
    <a class="button is-primary">
      <span>Click me</span>
      <span class="icon is-small">
        <i class="fa fa-angle-down"></i>
      </span>
    </a>
  </div>
  <div class="dropdown-container">
    <div class="dropdown-content">
      <a class="dropdown-item">
        Overview
      </a>
      <a class="dropdown-item">
        Modifiers
      </a>
      <a class="dropdown-item">
        Grid
      </a>
      <a class="dropdown-item">
        Form
      </a>
      <a class="dropdown-item">
        Elements
      </a>
      <a class="dropdown-item">
        Components
      </a>
      <a class="dropdown-item">
        Layout
      </a>
      <hr class="dropdown-divider">
      <a class="dropdown-item">
        More
      </a>
    </div>
  </div>
</div>
{% endcapture %}

{% capture dropdown_info_example %}
<div class="dropdown is-hoverable">
  <div class="dropdown-trigger">
    <a class="button is-info">
      <span>Hover me</span>
      <span class="icon is-small">
        <i class="fa fa-angle-down"></i>
      </span>
    </a>
  </div>
  <div class="dropdown-container">
    <div class="dropdown-content">
      <div class="dropdown-item">
        <p>You can insert <strong>any type of content</strong> within the dropdown menu.</p>
      </div>
    </div>
  </div>
</div>
{% endcapture %}

{% include subnav-components.html %}

<section class="section">
  <div class="container">

    <div class="columns" style="margin-bottom: -0.75rem !important;">
      <div class="column">
        <h1 class="title">Dropdown</h1>
        <h2 class="subtitle">
          An interactive <strong>dropdown menu</strong> for discoverable content
        </h2>
      </div>

      <div class="column is-narrow">
        <p class="content">
          <span class="tag is-success">New!</span>
          <span class="tag is-info">0.4.4</span>
        </p>
      </div>
    </div>

    <hr>

    {{dropdown_example}}
    {{dropdown_info_example}}
  </div>
</section>