Dropdowns

Dropdown styles and variations.

Get Started

1

Hover dropdowns

Basic dropdown

If you dont want to use any javascript for your dropdowns, Bulkit ships with handy hover dropdowns. Any element can be a hover dropdown trigger. You just need to add the .is-drop class to it. Then insert the dropdown structure inside the trigger element. Note that it is better if the trigger element has a defined width, like a button, else your dropdown might not behave as expected. Check the code sample for more details.

Dropdown
  • Download invoice
  • Send info
  • Delete

Dropdown with icons

A hover dropdown menu items can have icons on the left. Simply add the icons you want inside the item markup. Check the code example.

Dropdown
  • Download invoice
  • Send info
  • Delete
SHOW CODE

<div class="button btn-align has-icon-right primary-btn btn-outlined is-drop">Dropdown <i class="sl sl-icon-arrow-down is-icon-xs"></i>
    <div class="dropContain">
        <div class="dropOut">
            <ul>
                <li><i class="drop-icon sl sl-icon-cloud-download"></i> Download invoice</li>
                <li><i class="drop-icon sl sl-icon-paper-plane"></i> Send info</li>
                <li><i class="drop-icon sl sl-icon-trash"></i> Delete</li>
            </ul>
        </div>
    </div>
</div>
                                        

Dropdown positions

Hover dropdowns can be positioned in 3 ways : left, wich is default, center and right. For a centered dropdown, add the .is-centered class to the .is-drop trigger element. For a right positioned dropdown, use the is-right class.

Left
  • Download invoice
  • Send info
  • Delete
Center
  • Download invoice
  • Send info
  • Delete
Right
  • Download invoice
  • Send info
  • Delete

Hover colors

You can change the dropdown items color on hover. For primary color, add the .is-primary class to the .dropOut element. For secondary color, add the .is-secondary class to the .dropOut element. For accent color, add the .is-accent class to the .dropOut element.

Default
  • Download invoice
  • Send info
  • Delete
Primary
  • Download invoice
  • Send info
  • Delete
Secondary
  • Download invoice
  • Send info
  • Delete
Accent
  • Download invoice
  • Send info
  • Delete

Card action

Hover dropdowns can be very handy for context menus like in this example. Hover over the small arrow on the right side of the card to make the dropdown appear. Check the code example for more details

Helen Miller
Sales team
  • Download invoice
  • Send info
  • Delete

Lorem ipsum dolor sit amet, has vero libris melius ea, omnis velit comprehensam duo an, meis ornatus eam ad. Ius ut labores scaevola.

SHOW CODE

<div class="flex-card light-bordered hover-inset card-overflow">
    <div class="flex-card-header">
        <div class="header-avatar">
            <img src="assets/images/avatars/helen.jpg" alt="">
        </div>
        <div class="header-info">
            <div class="header-title">Helen Miller</div>
            <div class="header-subtitle">Sales team</div>
        </div>
        <div class="header-control ml-auto is-drop drop-sm">
            <i class="sl sl-icon-arrow-down"></i>
            <div class="dropContain">
                <div class="dropOut">
                    <ul>
                        <li><i class="drop-icon sl sl-icon-cloud-download"></i> Download invoice</li>
                        <li><i class="drop-icon sl sl-icon-paper-plane"></i> Send info</li>
                        <li><i class="drop-icon sl sl-icon-trash"></i> Delete</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="card-body is-small">
        <div class="content">
            <p class="pb-10">Lorem ipsum dolor sit amet, has vero libris melius ea, omnis velit comprehensam duo an, meis ornatus eam ad. Ius ut labores scaevola.</p>
        </div>
        <div class="has-text-right">
            <a class="button btn-align btn-outlined accent-btn rounded raised">Follow</a>
        </div>
    </div>  
</div>
                                        
2

Click dropdowns

Basic examples

You can have more control on dropdowns by using click dropdown. In this case the trigger has to be clicked for the dropdown to show up. Bulkit click dropdowns are based on Jquery Dropdown. Click dropdowns are handled with the data-jq-dropdown="#myDropdownId", pointing to a separate dropdown div elsewhere on the page. Click dropdowns can have a small arrow if you add the class .jq-dropdown-tip to the dropdown parent container.

SHOW CODE

<!-- Dropdown trigger -->
<button class="button" data-jq-dropdown="#my-dropdown">Dropdown</button>
<!-- /Dropdown trigger -->

<!-- Dropdown -->
<div id="my-dropdown" class="jq-dropdown jq-dropdown-tip">
    <ul class="jq-dropdown-menu">
        <li><a href="#">Account</a></li>
        <li><a href="#">Tasks</a></li>
        <li><a href="#">Settings</a></li>
        <li class="jq-dropdown-divider"></li>
        <li><a href="#">Log out</a></li>
    </ul>
</div>
<!-- /Dropdown -->
                                        

With icons

Click dropdowns menu items can have icons as well. Just add the desired icons inside the menu items elements.

Scroll dropdown

If you need to display a very long content inside your dropdown, you can use a scroll dropdown. To make your dropdown scroll automatically when there is enough content, add the .jq-dropdown-scroll class to the dropdown parent element.

Checkboxes and radios

You can easily add controls inside click dropdowns. You can add either checkboxes or radio buttons. Check the code to see a live example.

SHOW CODE

<!-- Dropdown trigger -->
<button class="button btn-align accent-btn btn-outlined raised" data-jq-dropdown="#with-checkboxes-radios"> Dropdown</button>
<!-- /Dropdown trigger -->

<!-- Dropdown -->
<div id="with-checkboxes-radios" class="jq-dropdown">
    <ul class="jq-dropdown-menu">
        <li>
            <label class="checkbox-wrap is-small">
                <input id="check1" type="checkbox" class="b-checkbox" onchange="console.log('changed');">
                <span></span>
                Pro features
            </label>
        </li>
        <li>
            <label class="checkbox-wrap is-small">
                <input id="check2" type="checkbox" class="b-checkbox" onchange="console.log('changed');">
                <span></span>
                Auto backup
            </label>
        </li>
        <li>
            <label class="checkbox-wrap is-small">
                <input id="check3" type="checkbox" class="b-checkbox" onchange="console.log('changed');">
                <span></span>
                Dedicated support
            </label>
        </li>
        <li class="jq-dropdown-divider"></li>
        <li>
            <label class="radio-wrap is-small is-primary">
                <input type="radio" class="b-radio" name="radio-group">
                <span></span>
                Starter plan
            </label>
        </li>
        <li>
            <label class="radio-wrap is-small is-secondary">
                <input type="radio" class="b-radio" name="radio-group">
                <span></span>
                Pro plan
            </label>
        </li>
        <li>
            <label class="radio-wrap is-small is-accent">
                <input type="radio" class="b-radio" name="radio-group">
                <span></span>
                Business plan
            </label>
        </li>
    </ul>
</div>
<!-- /Dropdown -->
                                        

Hover colors

Click dropdowns menu items can have different colors on hover. Available classes are .is-primary, .is-secondary and .is-accent. Add one of these classes to the .jq-dropdown container.

3

Dropdown panels

Basic example

A variant of Jquery dropdowns are panels. Panels can contain regular html markup and serve many purposes. All jquery dropdown options also apply to panels.

SHOW CODE

<!-- Panel trigger -->
<button class="button btn-align accent-btn btn-outlined raised" data-jq-dropdown="#tip-panel"> Drop panel</button>
<!-- /Panel trigger -->

<!-- Panel -->
<div id="tip-panel" class="jq-dropdown jq-dropdown-tip has-icons">
    <div class="jq-dropdown-panel">
        Here is some <code>HTML</code> inside of a jq-dropdown. You can put pretty much
        anything inside of a jq-dropdown, so have fun with it!
    </div>
</div>
<!-- /Panel -->
                                        

Notifications panel

Here is an example of what you can do with a dropdown panel. this panel shows a user notifications panel, like you can find in many apps. Notification items rely on a modified Bulma Media object.

SHOW CODE

<!-- Panel trigger -->
<button class="button btn-align success-btn btn-outlined raised" data-jq-dropdown="#notifications-panel"> Notifications</button>
<!-- /Panel trigger -->

<!-- Panel -->
<div id="notifications-panel" class="jq-dropdown jq-dropdown-tip has-icons">
    <div class="jq-dropdown-panel">
        <article class="media media-notification">
            <figure class="media-left">
                <p class="image is-32x32">
                    <img class="img-circle" src="assets/images/avatars/terry.jpg">
                </p>
            </figure>
            <div class="media-content">
                <div class="content">
                    <p>
                        <span class="notification-title">Terry Daniels</span> <small class="timestamp pull-right">31 minutes ago</small>
                        <br>
                        <span class="notification-text">Added a document to the project library.</span>
                    </p>
                </div>
            </div>
        </article>
        <article class="media media-notification">
            <figure class="media-left">
                <p class="image is-32x32">
                    <img class="img-circle" src="assets/images/avatars/carolin.png">
                </p>
            </figure>
            <div class="media-content">
                <div class="content">
                    <p>
                        <span class="notification-title">Marjory Cambell</span> <small class="timestamp pull-right">2 hours ago</small>
                        <br>
                        <span class="notification-text">Commented one of your tasks.</span>
                    </p>
                </div>
            </div>
        </article>
        <article class="media media-notification">
            <figure class="media-left">
                <p class="image is-32x32">
                    <img class="img-circle" src="assets/images/avatars/henry.jpg">
                </p>
            </figure>
            <div class="media-content">
                <div class="content">
                    <p>
                        <span class="notification-title">Henry Rogers</span> <small class="timestamp pull-right">3 hours ago</small>
                        <br>
                        <span class="notification-text">Added new tasks to project #122.</span>
                    </p>
                </div>
            </div>
        </article>
        <div class="see-all has-text-centered">
            <a href="#">All notifications</a>
        </div>
    </div>
</div>
<!-- /Panel -->
                                        

Bookmarks panel

Here is another example of dropdown panel, this one is used to display previsously added bookmarks.

SHOW CODE

<!-- Panel trigger -->
<button class="button btn-align warning-btn btn-outlined raised" data-jq-dropdown="#bookmarks-panel"> Bookmarks</button>
<!-- /Panel trigger -->

<!-- Panel -->
<div id="bookmarks-panel" class="jq-dropdown jq-dropdown-tip has-icons">
    <div class="jq-dropdown-panel">
        <article class="media icon-media">
            <figure class="media-left">
                <i class="im im-icon-File-Word"></i>
            </figure>
            <div class="media-content">
                <div class="content">
                    <p>
                        <span class="notification-title">Project_budget.docx</span> <small class="timestamp pull-right"><i class="sl sl-icon-lock"></i> Locked</small>
                        <br>
                        <span class="notification-text">Word document</span>
                    </p>
                </div>
            </div>
        </article>
        <article class="media icon-media">
            <figure class="media-left">
                <i class="im im-icon-File-Excel"></i>
            </figure>
            <div class="media-content">
                <div class="content">
                    <p>
                        <span class="notification-title">Accounts_stakeholders.xlsx</span> <small class="timestamp pull-right"><i class="sl sl-icon-lock-open"></i> Unlocked</small>
                        <br>
                        <span class="notification-text">Excel document</span>
                    </p>
                </div>
            </div>
        </article>
        <article class="media icon-media">
            <figure class="media-left">
                <i class="im im-icon-File-JPG"></i>
            </figure>
            <div class="media-content">
                <div class="content">
                    <p>
                        <span class="notification-title">Train_receipts.jpg</span> <small class="timestamp pull-right"><i class="sl sl-icon-lock-open"></i> Unlocked</small>
                        <br>
                        <span class="notification-text">Image document</span>
                    </p>
                </div>
            </div>
        </article>
        <div class="see-all has-text-centered">
            <a href="#">All bookmarks</a>
        </div>
    </div>
</div>
<!-- /Panel -->
                                        
Here is some HTML inside of a jq-dropdown. You can put pretty much anything inside of a jq-dropdown, so have fun with it!
Here is some HTML inside of a jq-dropdown. You can put pretty much anything inside of a jq-dropdown, so have fun with it!

Terry Daniels Added a document to the project library. 31 minutes ago

Marjory Cambell Commented one of your tasks. 2 hours ago

Henry Rogers Added new tasks to project #122. 3 hours ago

Project_budget.docx Word document

Accounts_stakeholders.xlsx Excel document

Train_receipts.jpg Image document