Bulma Right aligned Dropdown

Bulma is a CSS framework that can be used as an alternative to Bootstrap. It is based on flexbox. In this article, we will be seeing how to make a dropdown right-aligned in Bulma. To make a dropdown right-aligned, we just have to add the is-right modifier to the dropdown container.

Bulma Right Aligned Dropdown Classes:

is-right: This class is used on the dropdown container to make the dropdown aligned to right.

Syntax:

<div class="dropdown is-right">
    ...
</div>

Example: The below example illustrates how to use the is-right modifier on the dropdown container to make the dropdown align to right in Bulma.

HTML

<!DOCTYPE html>
<html>

<head>
    <link rel='stylesheet' href=
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'>
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"/>

    <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>

Output:

Reference: https://bulma.io/documentation/components/dropdown/#right-aligned

Bulma Right aligned Dropdown

Explore