Bulma is an Open source CSS framework developed by Jeremy Thomas. This framework is based on the CSS Flexbox property. It is highly responsive, minimizing the use of media queries for responsive behavior.
A navbar is a horizontal navigation bar that has navbar items, buttons, dropdown menus, etc.
Classes Used:
- navbar: It is the main component.
- navbar-brand: We can place the logo using this class.
- navbar-burger: It is also called the hamburger icon in the left corner of the navbar.
- navbar-menu: The right part of the screen is visible only in desktop mode.
- navbar-item: Items in the navigation bar are shown using this class.
- navbar-link: This class is used to set the links to other routes.
- navbar-dropdown: This class is used to set the dropdown menu.
- navbar-divider: This class is used to set the horizontal line that can separate the navbar items from each other.
Variable Used:
| Name | Description | Type | Value | Computed Value | Computed Type |
|---|---|---|---|---|---|
| $navbar-background-color | This provides color to the background. | variable | $scheme-main | hsl(0, 0%, 100%) | color |
| $navbar-box-shadow-size | This variable is used to define the size of the shadow of the navbar. | size | 0 2px 0 0 | ||
| $navbar-box-shadow-color | This variable is used to define the color of the shadow of the navbar. | variable | $background | hsl(0, 0%, 96%) | color |
| $navbar-height | This variable is used to define the height of the navbar. | size | 3.25rem | ||
| $navbar-padding-vertical | This variable is used to define the vertical padding on the navbar. | size | 1rem | ||
| $navbar-padding-horizontal | This variable is used to define the horizontal padding on the navbar. | size | 2rem | ||
| $navbar-z | This variable is used to define the level on which you want to place your navbar. | string | 30 | ||
| $navbar-fixed-z | This variable is used to define the fixed level of the navbar. | string | 30 | ||
| $navbar-item-color | This variable is used to define the color of the item on the navbar. | variable | $text | hsl(0, 0%, 29%) | color |
| $navbar-item-hover-color | This variable is used to define the color of the item on the navbar on hover. | variable | $link | hsl(229, 53%, 53%) | color |
| $navbar-item-hover-background-color | This variable is used to define the background color of the item on the navbar on hover. | variable | $scheme-main-bis | hsl(0, 0%, 98%) | color |
| $navbar-item-active-color | This variable is used to provide color to the active items only. | variable | $scheme-invert | hsl(0, 0%, 4%) | color |
| $navbar-item-active-background-color | This variable is used to provide the background color to the active item of the navbar on hover. | string | transparent | ||
| $navbar-item-img-max-height | This variable is used to provide the max height of the image in the navbar. | size | 1.75rem | ||
| $navbar-burger-color | This variable is used to provide color to the burger of the navbar. | variable | $navbar-item-color | ||
| $navbar-tab-hover-background-color | This variable is used to provide background-color to the navbar tab on hover. | string | transparent | ||
| $navbar-tab-hover-border-bottom-color | This variable is used to provide color to the bottom border of the navbar tab on hover. | variable | $link | hsl(229, 53%, 53%) | color |
| $navbar-tab-active-color | This variable is used to provide color to the active navbar tabs. | variable | $link | hsl(229, 53%, 53%) | color |
| $navbar-tab-active-background-color | This variable is used to provide background color to the active tabs of the navbar. | string | transparent | ||
| $navbar-tab-active-border-bottom-color | This variable is used to provide color to the active bottom border of the navbar. | variable | $link | hsl(229, 53%, 53%) | color |
| $navbar-tab-active-border-bottom-style | This variable is used to define style to the active bottom border. | string | solid | ||
| $navbar-tab-active-border-bottom-width | This variable is used to define the width of the active bottom part of the border. | size | 3px | ||
| $navbar-dropdown-background-color | This variable is used to define the background color of the dropdown menu of the navbar. | variable | $scheme-main | hsl(0, 0%, 100%) | color |
| $navbar-dropdown-border-top | This variable is used to provide the border-top effect on the dropdown menu of the navbar. | size | 2px solid $border | ||
| $navbar-dropdown-offset | This variable is used to provide the offset effect on the dropdown menu of the navbar. | size | -4px | ||
| $navbar-dropdown-arrow | This variable is used to provide an arrow effect on the dropdown menu of the navbar. | variable | $link | hsl(229, 53%, 53%) | color |
| $navbar-dropdown-radius | This variable is used to provide the radius effect on the dropdown menu of the navbar. | variable | $radius-large | 6px | size |
| $navbar-dropdown-z | This variable is used to define the level of your element on the webpage. | string | 20 | ||
| $navbar-dropdown-boxed-radius | This variable is used to provide the boxed radius effect on the dropdown menu of the navbar. | variable | $radius-large | 6px | size |
| $navbar-dropdown-boxed-shadow | This variable is used to provide the boxed shadow effect on the dropdown menu of the navbar. | shadow | 0 8px 8px bulmaRgba($scheme-invert, 0.1), 0 0 0 1px bulmaRgba($scheme-invert, 0.1) | ||
| $navbar-dropdown-item-hover-color | This variable is used to provide the color to the dropdown menu of the navbar. | variable | $scheme-invert | hsl(0, 0%, 4%) | color |
| $navbar-dropdown-item-hover-background-color | This variable is used to provide background color to the item of the navbar on hover. | variable | $background | hsl(0, 0%, 96%) | color |
| $navbar-dropdown-item-active-color | This variable is used to provide the color to the active item of the dropdown menu. | variable | $link | hsl(229, 53%, 53%) | color |
| $navbar-dropdown-item-active-background-color | This variable is used to provide a background color to the active item of the dropdown menu. | variable | $background | hsl(0, 0%, 96%) | color |
| $navbar-divider-background-color | This variable is used to provide the background color to the divider of the navbar. | variable | $background | hsl(0, 0%, 96%) | color |
| $navbar-divider-height | This variable is used to provide height to the divider of the navbar. | size | 2px | ||
| $navbar-bottom-box-shadow-size | This variable is used to provide the size of the box shadow of the navbar. | size | 0 -2px 0 0 | ||
| $navbar-breakpoint | This variable is used to provide the breakpoint of the navbar when we decrease or increase the size of the screen. | variable | $desktop | 960px + (2 * $gap) | computed |
| $navbar-colors | This variable is used to define the color of the navbar. | variable | $colors | Bulma colors | map |
Syntax:
<nav class="navbar">
<div class="...">
...
</div>
</nav>
Syntax of variable:
$property-name: property-value;
Example 1: In the below code, we will make use of the above variable to demonstrate the use of the navbar.
<!DOCTYPE html>
<html>
<head>
<title>Bulma Variable</title>
<link rel='stylesheet' href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<!-- font-awesome cdn -->
<script src=
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'>
</script>
<link rel="stylesheet" href="style.css">
<style>
.title{
color:green;
}
nav{
margin-left:200px;
margin-right:200px;
}
</style>
</head>
<body>
<h1 class="title has-text-centered">
GeekforGeeks
</h1>
<h3 class="subtitle has-text-centered">
A computer science portal for geeks.
</h3>
<nav class="navbar">
<div class="navbar-menu">
<a class="navbar-item">
Menu 1
</a>
<a class="navbar-item">
Menu 2
</a>
<a class="navbar-item">
Menu 3
</a>
<a class="navbar-item">
Menu 4
</a>
<a class="navbar-item">
Menu 5
</a>
<a class="navbar-item">
Menu 6
</a>
</div>
</nav>
</body>
</html>
SCSS Code:
$navbar-colors: lightgreen;
.navbar{
background-color:$navbar-colors;
}
Compiled CSS Code:
.navbar {
background-color: lightgreen;
}
Output:
Example 2: In the below code, we will make use of the above variable to demonstrate the use of the navbar.
<!DOCTYPE html>
<html>
<head>
<title>Bulma Variable</title>
<link rel='stylesheet' href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<!-- font-awesome cdn -->
<script src=
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'>
</script>
<link rel="stylesheet" href="style.css">
<style>
.title{
color:green;
}
nav{
margin-left:200px;
margin-right:200px;
}
</style>
</head>
<body>
<h1 class="title has-text-centered">
GeekforGeeks
</h1>
<h3 class="subtitle has-text-centered">
A computer science portal for geeks.
</h3>
<nav class="navbar">
<div class="navbar-menu">
<a class="navbar-item">
Menu 1
</a>
<a class="navbar-item">
Menu 2
</a>
<a class="navbar-item">
Menu 3
</a>
<a class="navbar-item">
Menu 4
</a>
<a class="navbar-item">
Menu 5
</a>
<a class="navbar-item">
Menu 6
</a>
</div>
</nav>
</body>
</html>
SCSS Code:
$navbar-colors: green;
.navbar-item{
color:$navbar-colors;
}
Compiled CSS Code:
.navbar-item {
color: green;
}
Output:
Reference: https://bulma.io/documentation/components/navbar/
