Dropdown
You can use a regular dropdown to display a menu that will
hold your options. You can change the menu orientation. Use
the is-right class on the
dropdown element to align it to the right instead
of left, which is the default. Use the
is-up class to make it a dropup. Refer to the
markup for more details.
<div class="dropdown dropdown-trigger">
<div class="is-trigger">
<button class="button" aria-haspopup="true"
aria-controls="dropdown-menu">
<span>Dropdown button</span>
<span class="icon is-small">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content">
<a href="#" class="dropdown-item font-size-base">
Dropdown item
</a>
<a class="dropdown-item font-size-base">
Other dropdown item
</a>
<a href="#" class="dropdown-item font-size-base">
Active dropdown item
</a>
<a href="#" class="dropdown-item font-size-base">
Other dropdown item
</a>
<hr class="dropdown-divider">
<a href="#" class="dropdown-item font-size-base">
With a divider
</a>
</div>
</div>
</div>
<div class="dropdown dropdown-trigger is-right">
<div class="is-trigger">
<button class="button" aria-haspopup="true"
aria-controls="dropdown-menu">
<span>Dropdown button</span>
<span class="icon is-small">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content">
<a href="#" class="dropdown-item font-size-base">
Dropdown item
</a>
<a class="dropdown-item font-size-base">
Other dropdown item
</a>
<a href="#" class="dropdown-item font-size-base">
Active dropdown item
</a>
<a href="#" class="dropdown-item font-size-base">
Other dropdown item
</a>
<hr class="dropdown-divider">
<a href="#" class="dropdown-item font-size-base">
With a divider
</a>
</div>
</div>
</div>
<div class="dropdown dropdown-trigger is-right is-up">
<div class="is-trigger">
<button class="button" aria-haspopup="true"
aria-controls="dropdown-menu">
<span>Dropdown button</span>
<span class="icon is-small">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content">
<a href="#" class="dropdown-item font-size-base">
Dropdown item
</a>
<a class="dropdown-item font-size-base">
Other dropdown item
</a>
<a href="#" class="dropdown-item font-size-base">
Active dropdown item
</a>
<a href="#" class="dropdown-item font-size-base">
Other dropdown item
</a>
<hr class="dropdown-divider">
<a href="#" class="dropdown-item font-size-base">
With a divider
</a>
</div>
</div>
</div>
Dropdown Colors
You can use all the available color classes on the dropdown
buttons, like is-primary or
is-danger for instance. Refer to the button
documentation for full customization options.
<div class="dropdown dropdown-trigger">
<div class="is-trigger">
<button class="button is-primary" aria-haspopup="true"
aria-controls="dropdown-menu">
<span>Dropdown button</span>
<span class="icon is-small">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content">
<a href="#" class="dropdown-item font-size-base">
Dropdown item
</a>
<a class="dropdown-item font-size-base">
Other dropdown item
</a>
<a href="#" class="dropdown-item font-size-base">
Active dropdown item
</a>
<a href="#" class="dropdown-item font-size-base">
Other dropdown item
</a>
<hr class="dropdown-divider">
<a href="#" class="dropdown-item font-size-base">
With a divider
</a>
</div>
</div>
</div>
<div class="dropdown dropdown-trigger">
<div class="is-trigger">
<button class="button is-danger" aria-haspopup="true"
aria-controls="dropdown-menu">
<span>Dropdown button</span>
<span class="icon is-small">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content">
<a href="#" class="dropdown-item font-size-base">
Dropdown item
</a>
<a class="dropdown-item font-size-base">
Other dropdown item
</a>
<a href="#" class="dropdown-item font-size-base">
Active dropdown item
</a>
<a href="#" class="dropdown-item font-size-base">
Other dropdown item
</a>
<hr class="dropdown-divider">
<a href="#" class="dropdown-item font-size-base">
With a divider
</a>
</div>
</div>
</div>
Context Menu
Huro dropdowns can also be displayed as a context menu holding
a single icon. The icon can be whatever you want. This
dropdown will have the specific is-dots class.
Please refer to the markup for more details about usage.
<div class="dropdown is-dots dropdown-trigger">
<div class="is-trigger" aria-haspopup="true" aria-controls="dropdown-menu">
<i data-feather="more-vertical"></i>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content">
<a href="#" class="dropdown-item font-size-base">
Dropdown item
</a>
<a class="dropdown-item font-size-base">
Other dropdown item
</a>
<a href="#" class="dropdown-item font-size-base">
Active dropdown item
</a>
<a href="#" class="dropdown-item font-size-base">
Other dropdown item
</a>
<hr class="dropdown-divider">
<a href="#" class="dropdown-item font-size-base">
With a divider
</a>
</div>
</div>
</div>
Modern Dropdown
If you add in some specific markup, regular dropdown buttons
can be enhanced into modern dropdowns with an animated caret
icon. Use the is-modern class on the
dropdown element along with the specific markup
that is provided in the code example. All button modifiers
still apply.
<div class="dropdown is-modern dropdown-trigger">
<div class="is-trigger" aria-haspopup="true" aria-controls="dropdown-menu">
<button class="button" aria-haspopup="true"
aria-controls="dropdown-menu">
<span>Modern Drop</span>
<span class="caret">
<i data-feather="chevron-down"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content">
<a href="#" class="dropdown-item font-size-base">
Dropdown item
</a>
<a class="dropdown-item font-size-base">
Other dropdown item
</a>
<a href="#" class="dropdown-item font-size-base">
Active dropdown item
</a>
<a href="#" class="dropdown-item font-size-base">
Other dropdown item
</a>
<hr class="dropdown-divider">
<a href="#" class="dropdown-item font-size-base">
With a divider
</a>
</div>
</div>
</div>
Menu with Icons
Dropdown menus can have icons and more structured content. You
can use them to display any type of information or options.
Use the is-spaced with the provided markup in the
code example.
<div class="dropdown is-modern is-spaced dropdown-trigger">
<div class="is-trigger" aria-haspopup="true" aria-controls="dropdown-menu">
<button class="button" aria-haspopup="true"
aria-controls="dropdown-menu">
<span>Modern Drop</span>
<span class="caret">
<i data-feather="chevron-down"></i>
</span>
</button>
</div>
<div class="dropdown-menu" role="menu">
<div class="dropdown-content">
<a href="#" class="dropdown-item is-media">
<div class="icon">
<i class="lnil lnil-coins"></i>
</div>
<div class="meta">
<span>Invest</span>
<span>Buy more stocks</span>
</div>
</a>
<a href="#" class="dropdown-item is-media">
<div class="icon">
<i class="lnil lnil-dollar-up"></i>
</div>
<div class="meta">
<span>Compare</span>
<span>Compare with others</span>
</div>
</a>
<a href="#" class="dropdown-item is-media">
<div class="icon">
<i class="lnil lnil-bank"></i>
</div>
<div class="meta">
<span>Trade</span>
<span>View opportunities</span>
</div>
</a>
<hr class="dropdown-divider">
<a href="#" class="dropdown-item is-media">
<div class="icon">
<i class="lnil lnil-wallet-alt-1"></i>
</div>
<div class="meta">
<span>Wallet</span>
<span>Open stock wallet</span>
</div>
</a>
</div>
</div>
</div>
Menu with Images
Dropdown menus can have images and more structured content.
You can use them to display any type of information or
options. Use the is-spaced with the provided
markup in the code example. The inner images can be made
rounded by adding the is-rounded class to the
image element.
<div class="dropdown is-modern is-spaced dropdown-trigger">
<div class="is-trigger" aria-haspopup="true" aria-controls="dropdown-menu">
<button class="button" aria-haspopup="true"
aria-controls="dropdown-menu">
<span>Modern Drop</span>
<span class="caret">
<i data-feather="chevron-down"></i>
</span>
</button>
</div>
<div class="dropdown-menu" role="menu">
<div class="dropdown-content">
<a href="#" class="dropdown-item is-media">
<img class="item-img" src="https://via.placeholder.com/150x150"data-demo-src="assets/img/avatars/svg/1.gif" alt="">
<div class="meta">
<span>John Doe</span>
<span>Island</span>
</div>
</a>
<a href="#" class="dropdown-item is-media">
<img class="item-img" src="https://via.placeholder.com/150x150"data-demo-src="assets/img/avatars/svg/1.gif" alt="">
<div class="meta">
<span>Alex Miller</span>
<span>England</span>
</div>
</a>
<a href="#" class="dropdown-item is-media">
<img class="item-img" src="https://via.placeholder.com/150x150"data-demo-src="assets/img/avatars/svg/1.gif" alt="">
<div class="meta">
<span>Lana Davis</span>
<span>Germany</span>
</div>
</a>
<hr class="dropdown-divider">
<a href="#" class="dropdown-item is-media">
<img class="item-img" src="https://via.placeholder.com/150x150"data-demo-src="assets/img/avatars/svg/1.gif" alt="">
<div class="meta">
<span>Stephane Robert</span>
<span>France</span>
</div>
</a>
</div>
</div>
</div>