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= <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
Reference: https://picturepan2.github.io/spectre/components/breadcrumbs.html#breadcrumbs
.png)
