### Select Language

### Activity

- Team
- Projects
- Schedule

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

#### Recently viewed

Browser Support Blog post
Twitch API Blog post
Twitter Auth Blog post

#### Recent Members

Alice C. Software Engineer
Tara S. UI/UX Designer
Jimmy H. Project Manager

- Components Hub
- Avatars
- Accordions
  - Accordion
  - Collapse
  - Image Accordion
- Breadcrumb
- Calendar
- Dropdown
- Icon Box
- Loader
- Message
- Modal
- Progress
- Tabs
  - Regular Tabs
  - Slider Tabs
- Flex Table
  - Base Table
  - Compact Table
  - Media Table
  - Advanced Table
- Snacks
- Plugins
  - Alertify
  - Autocomplete
  - Datepicker
  - ChoicesJs
  - NoUI Slider
  - Filepond
  - Light Gallery
  - Video Gallery
  - Video Player
  - Toasts
  - WebUI Popover
- Rich Text
  - Summernote
  - Sun Editor

# 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>