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.
<!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.
<!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