Bulma Breadcrumb Variables

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=
"https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">
    <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=
"https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">
    <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

Bulma Breadcrumb Variables

Explore