Skip to content
Related Articles

Related Articles

Bulma Navbar Variables

View Discussion
Improve Article
Save Article
  • Last Updated : 28 Jul, 2022
View Discussion
Improve Article
Save Article

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.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Bulma Variable</title>
    <link rel='stylesheet' href=
  
    <!-- font-awesome cdn -->
    <script src=
    </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.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Bulma Variable</title>
    <link rel='stylesheet' href=
  
    <!-- font-awesome cdn -->
    <script src=
    </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/


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!