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
Last Updated :
26 Aug, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...