Spectre Breadcrumbs

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=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre.min.css">
    <link rel="stylesheet"
        href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre-exp.min.css">
    <link rel="stylesheet"
        href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre-icons.min.css">
    <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:

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

Explore