Skip to main content

Dropdown

Display dropdowns as some easy ways to add more options and links to your project. Good dropdowns for displaying lists of links and more in a few easy ways by hover or focus.

Default dropdown​

Dropdown
Dropdown title
ProfileConfigurationPurchases
Sign out
<div class="dropdown is-hovered">
  <div class="dropdown-wrap">
    <span class="wrap-text">
      ...
      <svg />
    </span>
    <div class="dropdown-content">
      <h6 class="dropdown-title">...</h6>
      <a href="#" class="dropdown-item">
        ...
      </a>
      <hr class="dropdown-divider" />
      <a href="#" class="dropdown-item">
        ...
      </a>
    </div>
  </div>
</div>
ProfileConfigurationPurchases
Sign out
<div class="dropdown is-hovered has-large-text">
  <div class="dropdown-wrap">
    <div class="user-dropdown" aria-label="Profile Menu">
      <figure>
        <img src="..." alt="" />
      </figure>
      <svg />
    </div>
    <div class="dropdown-content">
      <a href="#" class="dropdown-item">
        ...
      </a>
    </div>
  </div>
</div>

has-large-text dropdown​

has-large-text: You can use this when a dropdown has a large text or sentence.

Without has-large-text
Dropdown title
ProfileConfiguration for your profilePurchases
Sign out
With has-large-text
Dropdown title
ProfileConfiguration for your profilePurchases
Sign out
<div class="dropdown is-hovered has-large-text">
  ...
</div>
Dropdown by focus
Dropdown title
ProfileConfigurationPurchases
Sign out

Just be sure to add tabindex="-1" attribute to the div tag, without it the dropdown won't work.

<div class="dropdown is-focused" tabindex="-1">
  ...
</div>
Primary
Dropdown title
ProfileConfigurationPurchases
Sign out
Secondary
Dropdown title
ProfileConfigurationPurchases
Sign out
Tertiary
Dropdown title
ProfileConfigurationPurchases
Sign out
<div class="dropdown dropdown-primary">
  ...
</div>

<div class="dropdown dropdown-secondary">
  ...
</div>

<div class="dropdown dropdown-tertiary">
  ...
</div>