Foundation CSS Breadcrumbs
Last Updated :
13 Feb, 2022
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 & 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.
Foundation CSS Breadcrumb Classes:
- breadcrumbs: This class creates the Breadcrumb component. It is usually used on <ul> elements and the links can then be added inside the <li> tags.
- disabled: This class can be used to make the breadcrumbs to be disabled and disable the user from clicking on them.
Syntax:
<ul class="breadcrumbs">
<li style="font-size: 1em;">..</li>
<li style="font-size: 1em;">..</li>
...
</ul>
Example:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
<script src=
</script>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<h5>Foundation CSS Breadcrumbs</h5>
<b>Simple Breadcrumbs</b>
<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>
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...