Select Language

Activity

Joshua S. Las Vegas, NV
Melany W. San Jose, CA
Esteban C. Miami, FL
Tara S. New York, NY
The slicer project getslicer.io
31%
5 / 24
Metamovies reworked metamovies.co
84%
28 / 31
Fast Pizza redesign fastpizza.com
60%
25 / 39

Call Danny at Colby's

Today - 11:30am

Meeting with Alice

Today - 01:00pm

Answer Annie's message

Today - 01:45pm

Send new campaign

Today - 02:30pm

Project review

Today - 03:30pm

Call Trisha Jackson

Today - 05:00pm

Write proposal for Don

Today - 06:00pm

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>