Skip to content
Related Articles

Related Articles

Bulma Menu Variables

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

Bulma is a free and open-source CSS framework based on Flexbox. It is component-rich, compatible, and well-documented. It is highly responsive in nature. It uses classes to implement its design.

The Bulma framework provides the menu component that can be used as a type of vertical navigation. This component is useful for those websites that want to add vertical navigation. The Bulma Menu consists of three things i.e., menu container, menu labels, and menu list. The classes of the Bulma menu are discussed below.

Variable Used:

Variable-Name Description Type Value Computed Value Computed Type
$menu-item-color This variable is used to define the colour of the item on the menu.  variable $text hsl(0, 0%, 29%) color
$menu-item-radius This variable is used to define the radius of the item. variable $radius-small 2px size
$menu-item-hover-color This variable is used to define the color of the item on hover. variable $text-strong hsl(0, 0%, 21%) color
$menu-item-hover-background-color This variable is used to define the background color to the item on hover. variable $background hsl(0, 0%, 96%) color
$menu-item-active-color This variable is used to define the color of the active item color. variable $link-invert #fff color
$menu-item-active-background-color This variable is used to define the background color of the active item. variable $link hsl(229, 53%,  53%) color
$menu-list-border-left This variable is used to define the left side of the border of the list. size 1px solid $border    
$menu-list-line-height This variable is used to define the line height of the list. unitless 1.25    
$menu-list-link-padding This variable is used to define the padding of the link. size 0.5em 0.75em    
$menu-nested-list-margin This variable is used to define the margin of the nested list. size 0.75em    
$menu-nested-list-padding-left This variable is used to define the padding of the nested list. size 0.75em    
$menu-label-color This variable is used to define the color of the label. variable $text-light hsl(0, 0%, 48%) color
$menu-label-font-size This variable is used to define the font size of the menu. size 0.75em    
$menu-label-letter-spacing This variable is used to define the spacing around the letter of the menu. size 0.1em    
$menu-label-spacing This variable is used to define the spacing around the label. size 1em    

Example 1: In the below code, we will make use of the above variable to modify the 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 Menu variable>
   <!-- font-awesome cdn -->
   <script src=
    </script>
</head>
  
<body>
    <center>
        <h1 class="title" style="color:green;" >
            GeeksforGeeks
        </h1>        
        <h3 class="subtitle">
            A computer science portal for geeks
        </h3>  
  
        <p class="menu-label">Home</p>
  
  
        <ul class="menu-list">
            <li><a>About us</a></li>
            <li><a>Careers</a></li>
        </ul>          
    
    </center>
</body>
</html>


SCSS Code:

$menu-item-color:hsl(0, 0%, 29%);
.menu-list {
   color:$menu-item-color;
}

Compiled CSS Code:

.menu-list {
   color: #4a4a4a; 
}

Output:

 

Example 2: In the below code, we will make use of the above variable to modify the 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">
      
   <!-- font-awesome cdn -->
   <script src=
    </script>
</head>
  
<body>
    <center>
        <h1 class="title" style="color:green;" >
            GeeksforGeeks
        </h1>        
        <h3 class="subtitle">
            A computer science portal for geeks
        </h3>  
  
        <p class="menu-label">Home</p>
  
  
        <ul class="menu-list">
            <li><a>About us</a></li>
            <li><a>Careers</a></li>
        </ul>            
    
    </center>
</body>
</html>


SCSS Code:

$menu-label-spacing:1em;
li {
   padding:$menu-label-spacing;
}

Compiled CSS Code:

li {
  padding: 1em;
}

Output:

 

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


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!