Skip to content
Related Articles

Related Articles

Foundation CSS Breadcrumbs

View Discussion
Improve Article
Save Article
  • Last Updated : 13 Feb, 2022
View Discussion
Improve Article
Save Article

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>
    <!-- Compressed CSS -->
    <link rel="stylesheet" href=
  
    <!-- Compressed JavaScript -->
    <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:


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!