Skip to content
Related Articles

Related Articles

Spectre Breadcrumbs

View Discussion
Improve Article
Save Article
  • Last Updated : 30 Jan, 2022

Spectre Breadcrumbs offers us to design breadcrumbs. Breadcrumbs are used to indicate the current page’s location within a navigational hierarchy. 

To use breadcrumbs you need a container element with the breadcrumb class. Add child elements with the breadcrumb-item class.

Spectre Breadcrumbs Class:

  • breadcrumb: This class is used to create breadcrumbs items.
  • breadcrumb-item: This class is used to create a breadcrumbs specific item.

Syntax:

<ul class="breadcrumb">
      <li class="breadcrumb-item">
          ....
      </li>    
</ul>

Example: Below example illustrate the Spectre Breadcrumbs.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet"
        href=
    <link rel="stylesheet"
        href=
    <link rel="stylesheet"
        href=
    <style>
        .breadcrumb {
            margin-left: 15%;
        }
    </style>
</head>
  
<body>
    <center>
        <h1 class="text-success">GeeksforGeeks</h1>
        <strong>SPECTRE Breadcrumbs Class</strong>
    </center>
    <br>
    <strong>Breadcrumbs:</strong>
    <ul class="breadcrumb">
      <li class="breadcrumb-item">
        <a href="#">Tutorials</a>
      </li>
      <li class="breadcrumb-item">
        <a href="#">Web Technologies</a>
      </li>
      <li class="breadcrumb-item">
        <a href="#">HTML Tutorial... -Spectre Tutorial</a>
      </li>
    </ul>
</body>
  
</html>


Output:

Spectre Breadcrumbs

Spectre Breadcrumbs

Reference: https://picturepan2.github.io/spectre/components/breadcrumbs.html#breadcrumbs


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!