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.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width,initial-scale=1">
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">
<link rel="stylesheet" href="style.css">
<title>Bulma Menu variable>
<!-- font-awesome cdn -->
<script src=
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'>
</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.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width,initial-scale=1">
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">
<link rel="stylesheet" href="style.css">
<!-- font-awesome cdn -->
<script src=
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'>
</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
