---
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 %}

<section class="section">
  <div class="container">
    <h1 class="title">Dropdown</h1>
    <h2 class="subtitle">An interactive <strong>dropdown menu</strong> for discoverable content</h2>

    <hr>

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