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>