Spectre Breadcrumbs
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
Reference: https://picturepan2.github.io/spectre/components/breadcrumbs.html#breadcrumbs
Share your thoughts in the comments
Please Login to comment...