Skip to content
Related Articles

Related Articles

Bulma Dropdown Variables

Improve Article
Save Article
  • Last Updated : 29 Aug, 2022
Improve Article
Save Article

Bulma is a component-rich, modern, and lightweight CSS framework that is based on flexbox. It helps in building beautiful and responsive web interfaces easier and faster. In this article, we will be seeing what type of content can be used inside a dropdown component in Bulma.

So, an HTML <a> tag can be used directly as a dropdown item but we can also use an HTML <div> element as a dropdown item and fill the div element with whatever content we like. For example paragraphs, links, buttons, etc.

Variable Used:

Variable-Name Description Type Value Computed Value   Computed Type 
$dropdown-menu-min-width This variable is used to provide the minimum width of the dropdown menu. size                        12rem    
$dropdown-content-background-color This variable is used to provide the background color to the content of the dropdown. variable
 
$scheme-main hsl(0, 0%, 100%) color
$dropdown-content-arrow This variable is used to provide an arrow to the content of the dropdown. $variable
 
$link hsl(229, 53%,  53%) color
$dropdown-content-offset This variable is used to provide an offset to the content of the dropdown. size 4px    
$dropdown-content-padding-bottom This variable is used to provide bottom padding to the content of the dropdown. size 0.5rem    
$dropdown-content-padding-top This variable is used to provide top padding to the content of the dropdown. size 0.5rem    
$dropdown-content-radius This variable is used to provide a radius to the content of the dropdown. variable $radius 4px size
$dropdown-content-shadow This variable is used to provide a shadow to the content of the dropdown. variable $shadow 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) shadow
 
$dropdown-content-z This variable is used to provide an index to the content of the dropdown. string 20    
$dropdown-item-color This variable is used to provide color to the item of the dropdown. variable $text hsl(0, 0%, 29%) color
$dropdown-item-hover-color This variable is used to provide the hover effect to the item of the dropdown. variable $scheme-invert hsl(0, 0%, 4%) color
$dropdown-item-hover-background-color This variable is used to provide background color to the hover effect in the dropdown. variable $background hsl(0, 0%, 96%) color
$dropdown-item-active-color This variable is used to provide color to the active item of the dropdown. variable $link-invert #fff color
$dropdown-item-active-background-color This variable is used to provide the background color to the active dropdown item. variable $link hsl(229, 53%,  53%) color
$dropdown-divider-background-color This variable is used to provide background color to the divider of the dropdown. variable $border-light hsl(0, 0%, 93%) color

Example 1: In the below code, we will make use of the above variable to modify the dropdown menu.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
        "width=device-width,initial-scale=1">
    <link rel="stylesheet" href=
    <link rel="stylesheet" href="style.css">
    <title>Bulma Variable</title>
</head>
  
<body>
    <center>
        <h1 class="title" style="color:green;" >
            GeeksforGeeks
        </h1>        
        <h3 class="subtitle">
            A computer science portal for geeks
        </h3>
      
        <div class='container has-text-centered'>
            <div class='columns is-mobile is-centered'>
                <div class='column is-5'>
                    <div class="dropdown is-active">
                        <div class="dropdown-trigger">
                            <button class="button"
                                    aria-haspopup="true"
                                    aria-controls="dropdown-menu">
                                <span>Language</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">
                                    C++
                                </a>                        
                                <a href="#" class="dropdown-item">
                                    JAVA
                                </a>                        
                                <a href="#" class="dropdown-item">
                                    C
                                </a>                        
                                <a href="#" class="dropdown-item">
                                    Python
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>        
    </center>
</body>
</html>


SCSS Code:

$dropdown-content-background-color: lightgreen;
a {
   background-color:$dropdown-content-background-color;
}

Compiled CSS Code:

a {
 background-color: lightgreen;
}

Output:

 

Example 2: In the below code, we will make use of the above variable to modify the dropdown menu.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
        "width=device-width,initial-scale=1">
    <link rel="stylesheet" href=
    <link rel="stylesheet" href="style.css">
    <title>Bulma Variable</title>
</head>
  
<body>
    <center>
        <h1 class="title" style="color:green;" >
            GeeksforGeeks
        </h1>        
        <h3 class="subtitle">
            A computer science portal for geeks
        </h3>
      
        <div class='container has-text-centered'>
            <div class='columns is-mobile is-centered'>
                <div class='column is-5'>
                    <div class="dropdown is-active">
                        <div class="dropdown-trigger">
                            <button class="button" aria-haspopup="true"
                                    aria-controls="dropdown-menu">
                                <span>Language</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">
                                    C++
                                </a>                            
                                <a href="#" class="dropdown-item">
                                    JAVA
                                </a>                            
                                <a href="#" class="dropdown-item">
                                    C
                                </a>                            
                                <a href="#" class="dropdown-item">
                                    Python
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>        
    </center>
</body>
</html>


SCSS Code:

$dropdown-item-color: green;
.dropdown-item {
   color:$dropdown-item-color;
}

Compiled CSS Code:

.dropdown-item {
  color: green;
}

Output:

 

Reference: https://bulma.io/documentation/components/dropdown/#variables


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!