Open In App

Bulma Hoverable or Toggable Dropdown

Last Updated : 28 Feb, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we’ll see Bulma Hoverable and Toggable dropdown. Bulma uses dropdowns for giving the users list of multiple items to select. Below we have discussed all three types of dropdown with their examples.

Bulma Hoverable or Toggle dropdown classes:

  • dropdown-trigger: This class is used to display the dropdown items when triggered by a click.
  • is-active: This class is used to display dropdown items all the time.
  • is-hoverable: This class is used to display the dropdown items when hovering over the dropdown trigger.

Syntax:

// Dropdown trigfer
<div class="dropdown">
    <div class="dropdown-trigger">
        ....
    </div>
</div>

// is-active dropdown
<div class="dropdown is-active">
    <div class="dropdown-trigger">
        ....
    </div>
</div>

// is-hoverable dropdown
<div class="dropdown is-hoverable">
    <div class="dropdown-trigger">
        ....
    </div>
</div>

Example 1: Below example illustrates the Bulma Hoverable and Toggable dropdown.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css" />
    <script src=
        "https://use.fontawesome.com/releases/v5.15.4/js/all.js">
    </script>
</head>
  
<body>
    <div class="content container has-text-centered">
        <h1 class="title has-text-success">GeekforGeeks</h1>
        <h1 class="subtitle">Bulma Hoverable or Toggable Dropdown</h1>
  
        <div class="container m-4">
            <!-- Dropdown -->
            <div class="dropdown ">
                <div class="dropdown-trigger">
                    <button class="button" aria-haspopup="true"
                        aria-controls="dropdown-menu3">
                        <span>Normal dropdown</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-menu3" role="menu">
                    <div class="dropdown-content">
                        <a href="#" class="dropdown-item"> Java </a>
                        <a href="#" class="dropdown-item"> C++ </a>
                        <a href="#" class="dropdown-item"> Python </a>
                        <a href="#" class="dropdown-item"> C </a>
                        <hr class="dropdown-divider" />
                        <a href="#" class="dropdown-item"> DSA </a>
                    </div>
                </div>
            </div>
  
            <!-- Hoverable dropdown -->
            <div class="dropdown is-hoverable">
                <div class="dropdown-trigger">
                    <button class="button" aria-haspopup="true"
                        aria-controls="dropdown-menu4">
                        <span>Hoverable dropdown</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-menu4" role="menu">
                    <div class="dropdown-content">
                        <a href="#" class="dropdown-item"> Java </a>
                        <a href="#" class="dropdown-item"> C++ </a>
                        <a href="#" class="dropdown-item"> Python </a>
                        <a href="#" class="dropdown-item"> C </a>
                        <hr class="dropdown-divider" />
                        <a href="#" class="dropdown-item"> DSA </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
  
    <script>
        const dropdown =
            document.querySelector('.dropdown');
        const active =
            document.querySelector('.is-active')
        document.body.addEventListener('click', function () {
            if (active) {
                dropdown.classList.remove('is-active')
            }
        })
        dropdown.addEventListener('click', function (event) {
            event.stopPropagation();
            this.classList.toggle('is-active');
        });
    </script>
</body>
  
</html>
 






                        










Output:




Example 2: Below example illustrates the Bulma Active dropdown.






HTML















                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<!DOCTYPE html> 


<html lang="en"> 


  


<head> 


    <meta charset="UTF-8" /> 


    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 


    <meta name="viewport" content= 


        "width=device-width, initial-scale=1.0" /> 


    <link rel="stylesheet" href= 


"https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css" /> 


    <script src= 


    "https://use.fontawesome.com/releases/v5.15.4/js/all.js"> 


    </script> 


</head> 


  


<body> 


    <div class="content container has-text-centered"> 


        <h1 class="title has-text-success">GeekforGeeks</h1> 


        <h1 class="subtitle">Bulma Active Dropdown</h1> 


  


        <div class="dropdown is-active"> 


            <div class="dropdown-trigger"> 


                <button class="button" aria-haspopup="true"


                    aria-controls="dropdown-menu3"> 


                    <span>Active dropdown</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-menu3" role="menu"> 


                <div class="dropdown-content"> 


                    <a href="#" class="dropdown-item"> Java </a> 


                    <a href="#" class="dropdown-item"> C++ </a> 


                    <a href="#" class="dropdown-item"> Python </a> 


                    <a href="#" class="dropdown-item"> C </a> 


                    <hr class="dropdown-divider" /> 


                    <a href="#" class="dropdown-item"> DSA </a> 


                </div> 


            </div> 


        </div> 


    </div> 


  


    <script> 


        const dropdown = document.querySelector(".dropdown"); 


        const active = document.querySelector(".is-active"); 


        document.body.addEventListener("click", function () { 


            if (active) { 


                dropdown.classList.remove("is-active"); 


            } 


        }); 


        dropdown.addEventListener("click", function (event) { 


            event.stopPropagation(); 


            this.classList.toggle("is-active"); 


        }); 


    </script> 


</body> 


  


</html>



















                        







                        










Output:




Reference: https://bulma.io/documentation/components/dropdown/#hoverable-or-toggable


                                 


                            

                                

                                    Like Article
                                    
                                

                                

                                    
                                    

                                        
                                        Suggest improvement
                                    

                                

                            


                            

                            
 
                                

                                    
                                        Next
                                        
                                    
                                    
                                    

                                        Bulma Dropdown Variables
                                    

                                

                                                        

                            
    

        

            Share your thoughts in the comments
        

        
    
                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
 
                        

                                                

                        
                                                    

                                

                                    Similar Reads                                    
                                

                                
      
                                    
        
            

                Create a Hoverable Side Navigation with HTML, CSS and JavaScript
            

        
    
        
            

                Bootstrap 5 Table Hoverable Rows
            

        
    
        
            

                How to create Hoverable Table Rows in Bootstrap 5 ?
            

        
    
        
            

                How to Add Hoverable Pagination using CSS ?
            

        
    
        
            

                React Suite Dropdown Dropdown with Icon
            

        
    
        
            

                Bulma | Dropdown
            

        
    
        
            

                Bulma Dropdown Menu
            

        
    
        
            

                Bulma Right aligned Dropdown
            

        
    
        
            

                Bulma Dropdown Content
            

        
    
        
            

                Bulma Dropdown Variables
            

        
                                    

                            

                                                                        

                                

                                    
                                                                    

                            


                        

                        

                            

                                

                                    

                                        
author
        

            
        

        

                                    


                                    

                                        tarunsinghwap7                                

                            

                            

            
                                

                            

                                                                    

                                        
Article Tags : 

                                        
                                    

                                                                                            

                                                                                    

                              

                            

                                                        
                        

                    

                

            

        
        


        

                


			
		
		                
        

    

    

        

            

            

        

    












	

    
  

  
  








    
        We use cookies to ensure you have the best browsing experience on our website. By using our site, you
        acknowledge that you have read and understood our
        Cookie Policy &
        Privacy Policy
            
    







   Lightbox