--- title: Dropdown subtitle: "An interactive dropdown menu for discoverable content" layout: documentation doc-tab: components doc-subtab: dropdown breadcrumb: - home - documentation - components - components-dropdown meta: colors: false sizes: false variables: true --- {% capture dropdown_example %} {% endcapture %} {% capture dropdown_content_example %} {% endcapture %} {% capture dropdown_click_example %} {% endcapture %} {% capture dropdown_info_example %} {% endcapture %} {% capture dropdown_left_example %} {% endcapture %} {% capture dropdown_right_example %} {% endcapture %} {% capture dropdown_up_example %} {% endcapture %}

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

{% highlight html %}{{dropdown_example}}{% endhighlight %}

{% include anchor.html name="Dropdown content" %}

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.

{% highlight html %}{{dropdown_content_example}}{% endhighlight %}

{% include anchor.html name="Hoverable or Toggable" %}

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

While the CSS :hover implementation works perfectly, the is-active class is available for users who want to control the display of the dropdown with JavaScript.

{% highlight html %}{{dropdown_click_example}}{{dropdown_info_example}}{% endhighlight %}

{% include anchor.html name="Right aligned" %}

You can add the is-right modifier to have a right-aligned dropdown.

{% highlight html %}{{dropdown_right_example}}{% endhighlight %}

{% include anchor.html name="Dropup" %}

You can add the is-up modifier to have a dropdown menu that appears above the dropdown button.

{% highlight html %}{{dropdown_up_example}}{% endhighlight %}

{% include variables.html type='component' %}