In this guide, we will discuss Dropdown in Bulma.
Description
Bulma provides toggelable dropdown menus for displaying related links in a list format. You need to use base class as .dropdown with the below dropdown elements −
| Sr.No | Tag & Description |
|---|---|
| 1 | dropdown It is a main container, to wrap the dropdown menu. |
| 2 | dropdown-trigger It is a top part of the table that contains element for table header rows. |
| 3 | dropdown-menu It is a toggable menu that contains the related links. |
| 4 | dropdown-content It specifies the dropdown box with white background. |
| 5 | dropdown-item It defines each item of the dropdown. |
| 6 | dropdown-divider It specifies the horizontal line to divide the dropdown items. |
You can also use anchor tag (<a>) to make dropdown-item as link. The below example shows how to display the basic dropdown along with linking to an item, dropdown divider in the page by using above dropdown elements −
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Elements Example</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
</head>
<body>
<section class = "section">
<div class = "container">
<span class = "title">
Basic Dropdown
</span>
<br>
<br>
<div class = "dropdown">
<div class = "dropdown-trigger">
<button class = "button" aria-haspopup = "true" aria-controls = "dropdown-menu">
<span>Countries</span>
<span class = "icon is-small">
<i class = "fa 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">India</a>
<a class = "dropdown-item">England</a>
<a href = "#" class = "dropdown-item is-active">Australia</a>
<a href = "#" class = "dropdown-item">Srilanka</a>
<hr class = "dropdown-divider">
<a href = "#" class = "dropdown-item">South Africa</a>
</div>
</div>
</div>
<script>
//DOMContentLoaded - it fires when initial HTML document has been completely loaded
document.addEventListener('DOMContentLoaded', function () {
// querySelector - it returns the element within the document that matches the specified selector
var dropdown = document.querySelector('.dropdown');
//addEventListener - attaches an event handler to the specified element.
dropdown.addEventListener('click', function(event) {
//event.stopPropagation() - it stops the bubbling of an event to parent elements, by preventing parent event handlers from being executed
event.stopPropagation();
//classList.toggle - it toggles between adding and removing a class name from an element
dropdown.classList.toggle('is-active');
});
});
</script>
</div>
</section>
</body>
</html>
Hoverable Dropdown
The dropdown component uses is-hoverable class to display the related links in a list format, when you hover the dropdown-trigger element.
The below example specifies hoverable dropdown in the page −
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Elements Example</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
</head>
<body>
<section class = "section">
<div class = "container">
<span class = "title">
Hoverable Dropdown
</span>
<br>
<br>
<div class = "dropdown is-hoverable">
<div class = "dropdown-trigger">
<button class = "button" aria-haspopup = "true" aria-controls = "dropdown-menu4">
<span>Countries</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">India</a>
<a class = "dropdown-item">England</a>
<a href = "#" class = "dropdown-item is-active">Australia</a>
<a href = "#" class = "dropdown-item">Srilanka</a>
<hr class = "dropdown-divider">
<a href = "#" class = "dropdown-item">South Africa</a>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
var dropdown = document.querySelector('.dropdown');
dropdown.addEventListener('click', function(event) {
event.stopPropagation();
dropdown.classList.toggle('is-active');
});
});
</script>
</div>
</section>
</body>
</html>
Right Aligned Dropdown
Bulma allows displaying right aligned dropdown by using is-right modifier as shown in the below example −
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Elements Example</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
</head>
<body>
<section class = "section">
<div class = "container">
<span class = "title">
Right Aligned Dropdown
</span>
<br>
<br>
<div class = "dropdown is-right">
<div class = "dropdown-trigger">
<button class = "button" aria-haspopup = "true" aria-controls = "dropdown-menu4">
<span>Countries</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">India</a>
<a class = "dropdown-item">England</a>
<a href = "#" class = "dropdown-item is-active">Australia</a>
<a href = "#" class = "dropdown-item">Srilanka</a>
<hr class = "dropdown-divider">
<a href = "#" class = "dropdown-item">South Africa</a>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
var dropdown = document.querySelector('.dropdown');
dropdown.addEventListener('click', function(event) {
event.stopPropagation();
dropdown.classList.toggle('is-active');
});
});
</script>
</div>
</section>
</body>
</html>
Dropup
Bulma allows displaying the dropdown menu above the dropdown button by using is-up modifier as shown in the below example −
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Elements Example</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
</head>
<body>
<section class = "section">
<div class = "container">
<span class = "title">
Dropup Menu
</span>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class = "dropdown is-up">
<div class = "dropdown-trigger">
<button class = "button" aria-haspopup = "true" aria-controls = "dropdown-menu4">
<span>Countries</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">India</a>
<a class = "dropdown-item">England</a>
<a href = "#" class = "dropdown-item is-active">Australia</a>
<a href = "#" class = "dropdown-item">Srilanka</a>
<hr class = "dropdown-divider">
<a href = "#" class = "dropdown-item">South Africa</a>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
var dropdown = document.querySelector('.dropdown');
dropdown.addEventListener('click', function(event) {
event.stopPropagation();
dropdown.classList.toggle('is-active');
});
});
</script>
</div>
</section>
</body>
</html>
Next Topic : Click Here
Pingback: Bulma - Card | Adglob Infosystem Pvt Ltd
Pingback: Bulma - Components | Adglob Infosystem Pvt Ltd
Thank you for your blog post.Much thanks again. Awesome.