mirror of
https://github.com/jgthms/bulma.git
synced 2025-01-09 15:44:25 +00:00
80 lines
1.7 KiB
HTML
80 lines
1.7 KiB
HTML
---
|
|
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>
|