Foundation CSS is an open-source & responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to layout stunning responsive websites, apps, and emails that appear amazing and can be accessible to any device.
In this article, we will discuss the breadcrumb component in Foundation CSS.
Breadcrumb is a useful element in modern websites. It helps the user to go back to a specific part of the website very easily and keeps track of the hierarchy of the website pages. As having all possible links in the website’s navbar is inconvenient and therefore breadcrumbs become an effective alternative.
Variable Used:
| Variable-Name | Description | Type | Value |
|---|---|---|---|
| $breadcrumbs-margin | This variable is used to define the margin around a breadcrumbs container. | Number | 0 0 $global-margin 0 |
| $breadcrumbs-item-font-size | This variable is used to define the font size of breadcrumb links. | Number | rem-calc(11) |
| $breadcrumbs-item-color | This variable is used to define the color of breadcrumb links. | Color | $primary-color |
| $breadcrumbs-item-color-current | This variable is used to define the color of the active breadcrumb link. | Color | $black |
| $breadcrumbs-item-color-disabled | This variable is used to define the opacity of disabled breadcrumb links. | Number | $medium-gray |
| $breadcrumbs-item-margin | This variable is used to define the margin between breadcrumb items. | Number | 0.75rem |
| $breadcrumbs-item-uppercase | This variable is used to define the breadcrumb links in uppercase. | Boolean | true |
| $breadcrumbs-item-separator | This variable is used to define the separator between breadcrumb links. | Boolean | true |
| $breadcrumbs-item-separator-item | This variable is used to define the character of the breadcrumb separator. | Content | '/' |
| $breadcrumbs-item-separator-item-rtl | This variable is used to define the character for the breadcrumb separator in "rtl" mode. | Content | '\\' |
| $breadcrumbs-item-separator-color | This variable is used to define the color of breadcrumb item. | Color | $medium-gray |
Example 1: In the below code, we will make use of the above variable to demonstrate the use of the breadcrumbs.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Compressed CSS -->
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css">
<!-- Compressed JavaScript -->
<script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js">
</script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<center>
<h1 style="color: green">
GeeksforGeeks
</h1>
<h3>A computer science portal for geeks</h3>
</center>
<nav>
<ul class="breadcrumbs">
<li style="font-size:1em;">
<a href="#">Home</a>
</li>
<li style="font-size:1em;">
<a href="#">Courses</a>
</li>
<li style="font-size:1em;">
<a href="#"></a>Placements
</li>
<li style="font-size:1em;">
Discounts
</li>
</ul>
</nav>
<b>Disabled Breadcrumbs</b>
<nav>
<ul class="breadcrumbs">
<li style="font-size:1em;" class="disabled">
Cart
</li>
<li style="font-size:1em;" class="disabled">
Checkout
</li>
<li style="font-size:1em;" class="disabled">
Details
</li>
<li style="font-size:1em;" class="disabled">
Payment
</li>
</ul>
</nav>
</body>
</html>
SASS Code:
$breadcrumbs-margin: 0;
.breadcrumbs {
margin:$breadcrumbs-margin;
}
Compiled CSS Code:
.breadcrumbs {
margin: 0;
}
Output:
Example 2: In the below code, we will make use of the above variable to demonstrate the use of the breadcrumbs.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Compressed CSS -->
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css">
<!-- Compressed JavaScript -->
<script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js">
</script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<center>
<h1 style="color: green">
GeeksforGeeks
</h1>
<h3>A computer science portal for geeks</h3>
</center>
<nav>
<ul class="breadcrumbs">
<li style="font-size:1em;">
<a href="#">Home</a>
</li>
<li style="font-size:1em;">
<a href="#">Courses</a>
</li>
<li style="font-size:1em;">
<a href="#"></a>Placements
</li>
<li style="font-size:1em;">
Discounts
</li>
</ul>
</nav>
<b>Disabled Breadcrumbs</b>
<nav>
<ul class="breadcrumbs">
<li style="font-size:1em;" class="disabled">
Cart
</li>
<li style="font-size:1em;" class="disabled">
Checkout
</li>
<li style="font-size:1em;" class="disabled">
Details
</li>
<li style="font-size:1em;" class="disabled">
Payment
</li>
</ul>
</nav>
</body>
</html>
SASS Code:
$breadcrumbs-item-margin: 0.75rem;
a {
margin:$breadcrumbs-item-margin ;
}
Compiled CSS Code:
a {
margin: 0.75rem;
}
Output:
Reference: https://get.foundation/sites/docs/breadcrumbs.html