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= <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
Please Login to comment...