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.
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.
<div class="flex-card light-bordered hover-inset card-overflow">
<div class="flex-card-header">
<div class="header-avatar">
<img src="assets/img/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.
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.
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.
<!-- 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 -->
Reworked 3.0.0
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.
