Skip to content
Related Articles

Related Articles

Bulma Breadcrumb Variables

Improve Article
Save Article
  • Last Updated : 26 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.

In Bulma, a breadcrumb is a simple navigation component. To navigate the component, we only require a breadcrumb container and a ul list. 

Variable Used:

Variable-Name Description Type Value Computed Value Computed Type
$breadcrumb-item-color This variable is used to provide color to the item of breadcrumb variable.           $link hsl(229, 53%,  53%) color
$breadcrumb-item-hover-color This variable is used to provide a hover effect to the item of breadcrumb variable $link-hover hsl(0, 0%, 21%) color
$breadcrumb-item-active-color This variable is used to provide color to active items. variable $text-strong hsl(0, 0%, 21%) color
$breadcrumb-item-padding-vertical This variable is used to provide verticle padding to the item. string 0    
$breadcrumb-item-padding-horizontal This variable is used to provide horizontal padding to the item. size 0.75em    
$breadcrumb-item-separator-color This variable is used to provide color to the separator. variable $border-hover hsl(0, 0%, 71%) color

Example 1: In the below code, we will make use of the $breadcrumb-item-color variable.

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>
      
        <nav class="breadcrumb is-small" 
             aria-label="breadcrumbs">
            <ul>
                <li class="is-active">
                    <a href="#">GeeksforGeeks</a>
                </li>
                <li><a href="#">Courses</a></li>
                <li><a href="#">Practice</a></li>
                <li><a href="#">Jobs</a></li>
            </ul>
        </nav>    
    </center>
</body>
</html>


SCSS Code:

$breadcrumb-item-color: hsl(229, 53%,  53%);
li{
    color:$breadcrumb-item-color;
}

Compiled CSS Code:

li {
    color: #485fc7;
}

Output:

 

Example 2: In the below code, we will make use of the $breadcrumb-item-padding-horizontal variable.

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>
      
        <nav class="breadcrumb is-small" 
            aria-label="breadcrumbs">
            <ul>
                <li class="is-active">
                    <a href="#">GeeksforGeeks</a>
                </li>
                <li><a href="#">Courses</a></li>
                <li><a href="#">Practice</a></li>
                <li><a href="#">Jobs</a></li>
            </ul>
        </nav>    
    </center>
</body>
</html>


SCSS Code:

$breadcrumb-item-padding-horizontal: 0.75em;
li {
    padding:$breadcrumb-item-padding-horizontal;
}

Compiled CSS Code:

li {
    padding: 0.75em;
}

Output:

 

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


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!