---
title: Dropdown
layout: documentation
doc-tab: components
doc-subtab: dropdown
breadcrumb:
- home
- documentation
- components
- components-dropdown
meta:
colors: false
sizes: false
variables: true
---
{% capture dropdown_example %}
The dropdown component is a container for a dropdown button and a dropdown menu.
-
dropdown the main container
-
dropdown-trigger the container for a button
-
dropdown-menu the toggable menu, hidden by default
-
dropdown-content the dropdown box, with a white background and a shadow
-
dropdown-item each single item of the dropdown, which can either be a a or a div
-
dropdown-divider a horizontal line to separate dropdown items
While the dropdown-item can be used as an anchor link <a>, you can also use a <div> and insert almost any type of content.
The dropdown component has 2 additional modifiers
-
is-hoverable: the dropdown will show up when hovering the dropdown-trigger
-
is-active: the dropdown will show up all the time
{{dropdown_click_example}}{{dropdown_info_example}}
{% highlight html %}{{dropdown_click_example}}{{dropdown_info_example}}{% endhighlight %}
{% include elements/anchor.html name="Right aligned" %}
You can add the is-right modifier to have a right-aligned dropdown.
You can add the is-up modifier to have a dropdown menu that appears above the dropdown button.