<!DOCTYPE html>
<
html
>
<
head
>
<
link
rel
=
'stylesheet'
href
=
<
link
rel
=
"stylesheet"
href
=
<
style
>
.container > p {
margin-top: 30px;
}
</
style
>
</
head
>
<
body
class
=
"has-text-centered"
>
<
h1
class="is-size-2
has-text-success">
GeeksforGeeks
</
h1
>
<
b
class
=
"is-size-4"
>
Bulma Right ALigned Dropdown
</
b
>
<
div
class
=
"container is-fluid"
>
<
p
><
b
>Default Dropdown:</
b
></
p
>
<
div
class
=
"dropdown"
>
<
div
class
=
"dropdown-trigger"
>
<
button
class
=
"button"
aria-controls
=
"dropdown-menu1"
>
<
span
>Select a topic</
span
>
<
span
class
=
"icon is-small"
>
<
i
class
=
"fas fa-angle-down"
></
i
>
</
span
>
</
button
>
</
div
>
<
div
class
=
"dropdown-menu"
id
=
"dropdown-menu1"
role
=
"menu"
>
<
div
class
=
"dropdown-content"
>
<
div
class
=
"dropdown-item"
>
<
p
>Algorithms</
p
>
</
div
>
<
div
class
=
"dropdown-item"
>
<
p
>DBMS</
p
>
</
div
>
<
div
class
=
"dropdown-item"
>
<
p
>Data Structures</
p
>
</
div
>
</
div
>
</
div
>
</
div
>
<
p
><
b
>Right Aligned Dropdown:</
b
></
p
>
<
div
class
=
"dropdown is-right"
>
<
div
class
=
"dropdown-trigger"
>
<
button
class
=
"button"
aria-controls
=
"dropdown-menu1"
>
<
span
>Select a topic</
span
>
<
span
class
=
"icon is-small"
>
<
i
class
=
"fas fa-angle-down"
></
i
>
</
span
>
</
button
>
</
div
>
<
div
class
=
"dropdown-menu"
id
=
"dropdown-menu1"
role
=
"menu"
>
<
div
class
=
"dropdown-content"
>
<
div
class
=
"dropdown-item"
>
<
p
>Algorithms</
p
>
</
div
>
<
div
class
=
"dropdown-item"
>
<
p
>DBMS</
p
>
</
div
>
<
div
class
=
"dropdown-item"
>
<
p
>Data Structures</
p
>
</
div
>
</
div
>
</
div
>
</
div
>
</
div
>
<
script
>
var triggers = document.querySelectorAll(
".dropdown .dropdown-trigger");
triggers.forEach(function (trigger) {
var isopen = false;
trigger.addEventListener('click', function () {
if (isopen) {
trigger.parentElement
.classList.remove("is-active");
isopen = false;
} else {
trigger.parentElement
.classList.add("is-active");
isopen = true;
}
})
});
</
script
>
</
body
>
</
html
>