--- layout: documentation doc-tab: components doc-subtab: dropdown variables: - name: $dropdown-content-background-color value: $white - name: $dropdown-content-arrow value: $link - name: $dropdown-content-offset value: 4px - name: $dropdown-content-radius value: $radius - name: $dropdown-content-shadow value: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) - name: $dropdown-content-z value: 20 - name: $dropdown-item-color value: $grey-dark - name: $dropdown-item-hover-color value: $black - name: $dropdown-item-hover-background-color value: $background - name: $dropdown-item-active-color value: $primary-invert - name: $dropdown-item-active-background-color value: $primary - name: $dropdown-divider-background-color value: $border --- {% 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 %} {% include subnav-components.html %}

Dropdown

An interactive dropdown menu for discoverable content

{% include meta.html new=true since="0.4.4" colors=false sizes=false variables=true %}

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
{{dropdown_example}}
{% 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.

{{dropdown_content_example}}
{% 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.

{{dropdown_click_example}}{{dropdown_info_example}}
{% 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.

{{dropdown_left_example}}
{{dropdown_right_example}}
{% highlight html %}{{dropdown_right_example}}{% endhighlight %}
{% include variables.html %}